Array.push 没有正确添加项目答案

【问题标题】：Array.push does not add item to it correctlyArray.push 没有正确添加项目
【发布时间】：2020-04-26 16:22:20
【问题描述】：

所以，我正在练习 Vanilla JS，尝试使用类创建 hreflang 生成器。问题是当我单击“生成”按钮时，它没有在数组中正确添加值。它只添加一次，当我再次单击按钮时，它会替换内容。有人知道这个问题吗？

到目前为止，这是我的代码：（我接受反馈以改进你们发现的任何功能）

class hreflangGenerator {
  constructor() {
    this.urls = [];
    this.urlInput = document.getElementById('url');
    this.languageInput = document.getElementById('language');
    this.countryInput = document.getElementById('country');
    this.htmlRadio = document.getElementById('htmlRadio');
    this.sitemapRadio = document.getElementById('sitemapRadio');
    this.displayNone = document.querySelector('div.d-none');

    if(this.htmlRadio.checked === true){
      this.htmlTags();
    }else if(this.sitemapRadio.checked === true){
      console.log('sitemapRadio');
    }
  }

  htmlTags() {
    // this.displayNone.classList.remove('d-none');
    let results = document.getElementById('results');
    let url = this.urlInput.value;
    let language = this.languageInput.value;
    let country = this.countryInput.value;
    this.urls.push = `<link rel="alternate" href="${url}" hreflang="${language}-${country}" />`;
    console.log(this.urls)
    this.urls.forEach( url => {
     return console.log(url); 
    })
  }
}

const addButton = document.getElementById('addButton');

addButton.addEventListener("click", (event) => {
  event.preventDefault();
  new hreflangGenerator();
});

页面的 HTML 是：

<body>
  <header class="container d-flex justify-content-center my-4">
    <h1>Hreflang Generator</h1>
  </header>
  <section class="container">
    <form action="submit">
      <div class=" my-auto mx-auto  box">
        <input type="text" id="url" placeholder="Insert here the URL" class="mb-2 form-control">
        <label class="ml-1">Select Language:</label>
        <select class="form-control mb-2" id="language" required="" aria-hidden="true">
          <option value="def">Default</option>
          <option value="ab">Abkhaz</option>
          <option value="aa">Afar</option>
          <option value="af">Afrikaans</option>
          <option value="ak">Akan</option>
          <option value="sq">Albanian</option>
          <option value="am">Amharic</option>


        </select>
        <label class="ml-1">Select Country:</label>
        <select class="mb-2 form-control" id="country" required="" aria-hidden="true">
          <option value="def">Default</option>
          <option value="af">Afghanistan</option>
          <option value="ax">Aland Islands</option>
          <option value="al">Albania</option>
          <option value="dz">Algeria</option>

        </select>

        <div class="form-check mt-2 ml-1">
          <input class="form-check-input" type="radio" name="exampleRadios" id="htmlRadio" value="option1" checked>
          <label class="form-check-label" for="htmlRadio">
            Tags for HTML
          </label>
        </div>
        <div class="form-check mb-2 ml-1">
          <input class="form-check-input" type="radio" name="exampleRadios" id="sitemapRadio" value="option2">
          <label class="form-check-label" for="sitemapRadio">
            Tags for Sitemap.xml
          </label>
        </div>


        <button type="button" id="addButton" class="btn btn-warning">Generate</button>
      </div>
    </form>

    <div class="box  mx-auto m-4 ">
    <div class="d-flex flex-row results">
       rel="alternate" href="" hreflang="def-def" 
       rel="alternate" href="" hreflang="def-def"
       rel="alternate" href="" hreflang="def-def" 
       rel="alternate" href="" hreflang="def-def" 
       rel="alternate" href="" hreflang="def-def"  
      </div></div>

  </section>
  <script src="/bundle.js"></script>
</body>

我使用 Babel 和 webpack 作为编译器。

【问题讨论】：

Array#push is a function，不是属性。

标签： javascript arrays push

【解决方案1】：

试试这个...替换以下内容：

this.urls.push = `<link rel="alternate" href="${url}" hreflang="${language}-${country}" />`;

用这个：

this.urls.push(`<link rel="alternate" href="${url}" hreflang="${language}-${country}" />`);

我对 JS 不是超级流利，但从快速浏览来看，您似乎是在尝试为列表上的方法分配值，而不是向该方法传递您希望添加的值。

【讨论】：

【解决方案2】：

似乎每次按下按钮时，您都在创建hreflangGenerator 的新实例，从而每次按下按钮时都会调用您的类的构造函数。

您可以做的是获得类实例的引用，然后在按钮操作中调用引用变量的htmlTags 方法。

【讨论】：

您好，感谢您的快速回答。我想我得到了部分答案，我正在使用构造函数来检查用户选择了哪个单选按钮。根据这一点，我调用不同的函数来做不同的事情。所以你说的是我不应该使用构造函数并插入'if/else'作为点击事件的动作？
这也可能有效，是的，但是，请记住找到一种只调用一次构造函数的方法。这样您的数组就不会被新数组覆盖。