Array.push 没有正确添加项目

Question

所以，我正在练习 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 作为编译器。

Answer 1

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

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

有了这个：

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

我对 JS 不是超级流利，但从快速浏览来看，它看起来就像您正在尝试为列表上的方法分配一个值，而不是将该方法传递给您希望添加的值。

Answer 2

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

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

Array.push 没有正确添加项目

问题描述

2 个解决方案

解决方案1
2 2020-04-26 16:27:17

解决方案2
1 2020-04-26 16:28:44

Array.push 没有正确添加项目

问题描述

2 个解决方案

解决方案1 2 2020-04-26 16:27:17

解决方案2 1 2020-04-26 16:28:44

解决方案1
2 2020-04-26 16:27:17

解决方案2
1 2020-04-26 16:28:44