Array.push does not add item to it correctly

Question

So, I'm practicing Vanilla JS trying to create an hreflang generator using classes. The problem is that when i click on the button 'generate' it does not add the value correctly in the array. It only add once, when i click on the button again, it replaces the content. Does anyone have an idea about this issue?

This is my code so far: (i accept feedback to improve any features you guys identify)

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();
});

The HTML of the page is:

<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>

I'm using Babel with webpack as the compiler.

Answer 1

Try this... replace the following:

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

with this:

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

I'm not super fluent in JS, but just from a quick look, its looking like you're trying to assign a value to a method acting on the list, rather than passing that method the value you wish to add.

Answer 2

It seems that each time the button is pressed, you are creating a new instance of the hreflangGenerator , making the constructor of your class to be called each time the button is pressed.

What you could do, is to have a reference of the class instance and just call the htmlTags method of your referenced variable inside the button action.

Array.push does not add item to it correctly

Question

2 answers

solution1
2 2020-04-26 16:27:17

solution2
1 2020-04-26 16:28:44

Array.push does not add item to it correctly

Question

2 answers

solution1 2 2020-04-26 16:27:17

solution2 1 2020-04-26 16:28:44

solution1
2 2020-04-26 16:27:17

solution2
1 2020-04-26 16:28:44