我有一個我正在嘗試做的示例代碼 - 當您單擊其中一個尺寸即 li 時，它將在名為 price 的新 div 中顯示該專案的尺寸和價格。
當前發生的情況是，無論我選擇哪個 li，都會顯示第一個尺寸和價格，并不斷添加一個新的 div。我想要的是點擊顯示的任何 li 以及每次替換 div 的內部內容。任何有關我哪里出錯的幫助將不勝感激。
var sizeSelector = document.querySelectorAll('.container li');
sizeSelector.forEach(function(el) {
el.addEventListener('click', function() {
runFunction();
});
});
function runFunction() {
var newPrice = document.querySelector('.container li').innerHTML;
document.querySelector('.container').insertAdjacentHTML("afterend", "<div class='price'>" newPrice "</div>");
console.log(newPrice);
}<ul class='container'>
<li>Size Small $20</li>
<li>Size Medium $30</li>
<li> Size large $40</li>
</ul>uj5u.com熱心網友回復：
您使用的代碼只需要對runFunction, 和div包含class要包含在原始 HTML 模板中的價格進行小幅調整。通過這樣做，我們可以定位該 div 并單獨更新其內容。
var sizeSelector = document.querySelectorAll('.container li');
sizeSelector.forEach(function(el) {
el.addEventListener('click', function(evt) {
runFunction(evt);
});
});
function runFunction(evt) {
const newPrice = document.querySelector('.container li').innerHTML;
const priceDiv = document.querySelector('.price');
priceDiv.innerHTML = evt.target.innerHTML;
console.log(priceDiv.innerHTML);
}<ul class='container'>
<li>Size Small $20</li>
<li>Size Medium $30</li>
<li>Size large $40</li>
</ul>
<div class='price'></div>uj5u.com熱心網友回復：
var sizeSelector = document.querySelectorAll('.container li');
sizeSelector.forEach(function(el) {
el.addEventListener('click', function() {
runFunction(el);
});
});
function runFunction(el) {
var newPrice = el.innerHTML;
var priceDiv = document.querySelector('.price')
priceDiv.innerHTML = newPrice
}<ul class='container'>
<li>Size Small $20</li>
<li>Size Medium $30</li>
<li> Size large $40</li>
</ul>
<div class="price">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/370228.html
標籤：javascript 功能 点击 添加事件监听器