）
因此，我正在练习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一起用作编译器。
尝试一下...替换以下内容：
this.urls.push = `<link rel="alternate" href="${url}" hreflang="${language}-${country}" />`;
带有此：
this.urls.push(`<link rel="alternate" href="${url}" hreflang="${language}-${country}" />`);
我在JS中不是很熟练，但是从快速的角度看，它看起来就像您正在尝试为作用于列表的方法分配一个值，而不是将该方法传递给您希望添加的值。] >
[似乎每次按下按钮时，您都在创建hreflangGenerator的新实例，从而使每次按下按钮时都将调用该类的构造函数。