兩個按鈕的一個功能（增量，減量）

我希望能夠遞增和遞減一個值（5），我想用一個函數來說明這個問題（我知道如何用兩個函數來完成）。不幸的是，我無法完成它，無法弄清楚什麼是錯的。兩個按鈕的一個功能（增量，減量）

這裏是我的代碼：
HTML：

<form> 
    <button type="button" value="minus" onclick="updateAmount();"> 
    - 
    </button> 
    <span id="number"> 
    5 
    </span> 
    <button type="button" value="plus" onclick="updateAmount();"> 
    + 
    </button> 
</form>

JS：

var num = parseInt(document.getElementById('number'); 
var btn = document.querySelector('button'); 

btn.addEventListener('click', updateAmount); 

function updateAmount(){  
    btn.value === "minus" ? num-- : num++; 
    document.getElementById('number').value = num; 
}

在 JSfiddle

此外，如果可能，我希望能有一個香草JS的解決方案，但是任何的建議是歡迎:)

KS！

來源

2017-04-27 Jan Egbers

你可以試試這個...

<html> 
     <form> 
      <button type="button" value="minus" onclick="updateAmount(this.value);"> 
      - 
     </button> 
     <span id="number"> 
     5 
    </span> 
    <button type="button" value="plus" onclick="updateAmount(this.value);"> 
    + 
    </button>  
    </form> 
    <script> 
    function updateAmount(value){ 
    var num = parseInt(document.getElementById('number').innerHTML); 
    value=='plus'?num++:num--; 
    document.getElementById('number').innerHTML = num; 
    } 
</script> 
</html>

來源

2017-04-27 08:01:42

你可以交出行動作爲參數

<form> 
    <button type="button" value="minus" onclick="updateAmount('minus');"> 
    - 
    </button> 
    <span id="number"> 
    5 
    </span> 
    <button type="button" value="plus" onclick="updateAmount('plus');"> 
    + 
    </button> 
</form>

然後

function updateAmount(action) { 
    var num = parseInt(document.getElementById("number").innerHTML, 10); 
    switch(action) { 
     case 'minus': 
     num--; 
     break; 
     case 'plus': 
     num++; 
     break; 
    } 
    document.getElementById("number").innerHTML = num; 
}

來源

2017-04-27 07:57:04 devnull69

你接近，你有多個元素使用document.querySelectorAll()與有效選擇到那裏的參考和綁定事件處理程序。

由於您正在使用<SPAN>元素，因此它沒有value屬性，需要使用textContent屬性。

var btns = document.querySelectorAll('button'); 
 
btns.forEach(function(btn) { 
 
    btn.addEventListener('click', updateAmount); 
 
}); 
 

 
function updateAmount() { 
 
    var num = parseInt(document.getElementById('number').textContent.trim(), 10); 
 
    this.value === "minus" ? num-- : num++; 
 
    document.getElementById('number').textContent = num; 
 
}

<button type="button" value="minus">-</button> 
 
<span id="number">5</span> 
 
<button type="button" value="plus">+</button>

注：擺脫醜陋的在線點擊處理程序。

來源

2017-04-27 07:57:22 Satpal

最小，改變你的做法是將參數傳遞給函數：

function updateAmount(value) { 
 
    console.log("Update it by: " + value); 
 
}

<form> 
 
    <button type="button" value="minus" onclick="updateAmount(-1);"> 
 
    - 
 
    </button> 
 
    <span id="number"> 
 
    5 
 
    </span> 
 
    <button type="button" value="plus" onclick="updateAmount(1);"> 
 
    + 
 
    </button> 
 
</form>

或使用value屬性，並通過this進入功能：

function updateAmount(btn) { 
 
    var value = btn.value == "minus" ? -1 : 1; 
 
    console.log("Update it by: " + value); 
 
}

<form> 
 
    <button type="button" value="minus" onclick="updateAmount(this);"> 
 
    - 
 
    </button> 
 
    <span id="number"> 
 
    5 
 
    </span> 
 
    <button type="button" value="plus" onclick="updateAmount(this);"> 
 
    + 
 
    </button> 
 
</form>

這後一種方法與現代的事件處理和完美結合：

// Scoping function so our `updateAmount` isn't global 
 
(function() { 
 
    document.querySelector("button[value=minus]").addEventListener("click", updateAmount); 
 
    document.querySelector("button[value=plus]").addEventListener("click", updateAmount); 
 
    
 
    function updateAmount() { 
 
    var value = this.value == "minus" ? -1 : 1; 
 
    console.log("Update it by: " + value); 
 
    } 
 
})();

<form> 
 
    <button type="button" value="minus"> 
 
    - 
 
    </button> 
 
    <span id="number"> 
 
    5 
 
    </span> 
 
    <button type="button" value="plus"> 
 
    + 
 
    </button> 
 
</form>

來源

2017-04-27 07:57:41

只需使用這樣updateAmount(this)

function updateAmount(that) { 
 
var number = document.getElementById('number'); 
 
    var num = parseInt(number.innerHTML); 
 
    num = (that.value == "minus") ? --num : ++num; 
 
    number.innerHTML = num; 
 
}

<form> 
 
    <button type="button" value="minus" onclick="updateAmount(this);"> 
 
    - 
 
    </button> 
 
    <span id="number"> 
 
    5 
 
    </span> 
 
    <button type="button" value="plus" onclick="updateAmount(this);"> 
 
    + 
 
    </button> 
 
</form>

來源

2017-04-27 08:01:26 prasanth

var minusBtn = document.querySelector('#minus'); 
var plusBtn = document.querySelector('#plus'); 

minusBtn.addEventListener('click', updateAmount('minus')); 
plusBtn.addEventListener('click', updateAmount('plus')); 

function updateAmount(action) { 
    return function() { 
    var numberElem = document.getElementById('number'); 
    var number = numberElem.innerText; 
    number = parseInt(number, 10); 
    if (action === 'minus') { 
    number--; 
    } else if(action === 'plus') { 
    number++; 
    } else { 
    throw new Error('invalid operator'); 
    } 
    numberElem.innerText = number; 
}; 
} 


<form> 
<button id = "minus" type="button" value="minus"> 
    - 
</button> 
<span id="number"> 
    5 
</span> 
<button id = "plus" type="button" value="plus"> 
    + 
</button> 
</form>

這是咖喱功能一個很好的例子，你可以currify你updateAmount接受行動作爲參數的一部分

來源

2017-04-27 08:13:41 Sean

您的代碼只有兩個小瑕疵，其餘的是完美的。首先您的變量num正在評估爲NaN。
其次，您應該使用textContent而不是值。我分享正確的方式來評估數字，然後它將工作。

var el =document.getElementById('number') 
var num = parseInt(el.textContent);

再次，在更新

document.getElementById('number').textContent = num

希望它幫助。

來源

2017-04-27 08:28:29 Shahzad

兩個按鈕的一個功能（增量，減量）

回答

相關問題