Array.pu sh неправильно добавляет элемент - PullRequest
Новая
       10

Array.pu sh неправильно добавляет элемент

0 голосов
/ 26 апреля 2020

Итак, я практикую ваниль 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 в качестве компилятора.

Ответы [ 2 ]

2 голосов
/ 26 апреля 2020

Попробуйте это ... замените следующее: 

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

на это: 

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

Я не очень беглый в JS, но просто из быстрого взгляда похоже, что вы пытаетесь присвоить значение методу, действующему в списке, вместо того, чтобы передавать этому методу значение, которое вы sh добавите.

1 голос
/ 26 апреля 2020

Кажется, что при каждом нажатии кнопки вы создаете новый экземпляр hreflangGenerator, заставляя конструктор вашего класса вызываться при каждом нажатии кнопки.

Что вы могли бы do, это иметь ссылку на экземпляр класса и просто вызывать метод htmlTags указанной вами переменной внутри действия кнопки.

...