所以，我正在练习VanillaJS，试图使用类创建一个hreflang生成器。问题是，当我单击按钮"generate"时，它没有在数组中正确添加值。它只添加一次，当我再次点击按钮时，它会替换内容。有人知道这个问题吗？
到目前为止，这是我的代码：(我接受反馈来改进你们确定的任何功能(
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实例，从而使每次按下按钮都会调用类的构造函数。
您可以做的是对类实例进行引用，并在按钮操作中调用被引用变量的htmlTags方法。