Array.push 沒有正確添加項目
[英]Array.push does not add item to it correctly
問題描述
所以，我正在練習 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 作為編譯器。
2 個解決方案
解決方案1
2 2020-04-26 16:27:17
試試這個...替換以下內容：
this.urls.push = `<link rel="alternate" href="${url}" hreflang="${language}-${country}" />`;
有了這個：
this.urls.push(`<link rel="alternate" href="${url}" hreflang="${language}-${country}" />`);
我對 JS 不是超級流利，但從快速瀏覽來看，它看起來就像您正在嘗試為列表上的方法分配一個值，而不是將該方法傳遞給您希望添加的值。
解決方案2
1 2020-04-26 16:28:44
似乎每次按下按鈕時，您都在創建hreflangGenerator的新實例，從而每次按下按鈕時都會調用 class 的構造函數。
您可以做的是獲取 class 實例的引用，然后在按鈕操作中調用引用變量的htmlTags方法。
function 中的 array.push(item)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.