2013-07-15 108 views
0

我想添加一個變量b,開始在100的價值。當我點擊價值a的添加按鈕,它將值1加到a但減1 100,反之亦然,帶減號按鈕。當增加價值減去價值b

<head> 
<script type="text/javascript"> 
var b = 100 
document.getElementById('Valueb').innerHTML = b; 

var a = 0; 
var add = function(valueToAdd){ 
    a += valueToAdd; 
    document.getElementById('Valuea').innerHTML = a; 

    if(a == 0) { 
     document.getElementById('minus').disabled = true; 
    } else { 
     document.getElementById('minus').disabled = false; 
    } 
}  
</script> 

</head> 
<body> 
Valueb:<span id="Valueb">0</span> 

Valuea:<span id="Valuea">0</span> 
<button type="button" id = add onclick="javascript:add(1)">+</button> 
<button type="button" id = minus onclick="javascript:add(-1)">-</button> 

</body> 
+1

,問題是......? –

+0

...那又是什麼問題呢? – Jashaszun

+1

提示:事件只能運行JavaScript,所以不需要「javascript:」 –

回答

1

您需要將腳本放在正文部分的末尾。

<head> 

<body> 
Value b:<span id="Valueb">0</span> 

Value a:<span id="Valuea">0</span> 
<button type="button" id = add onclick="javascript:add(1)">+</button> 
<button type="button" id = minus onclick="javascript:add(-1)">-</button> 
<script type="text/javascript"> 
var b = 100 
document.getElementById('Valueb').innerHTML = b; 

var a = 0; 
var add = function(valueToAdd){ 
    a += valueToAdd; 
    b -=valueToAdd; 
    document.getElementById('Valuea').innerHTML = a; 
    document.getElementById('Valueb').innerHTML = b; 

    if(a == 0) { 
     document.getElementById('minus').disabled = true; 
    } else { 
     document.getElementById('minus').disabled = false; 
    } 
    }  
    </script> 


</head> 
</body> 
0

在瀏覽器中按F12(或其他),然後查看控制檯。 重新加載頁面,您可以在Javascript代碼中看到錯誤。

<span id="Valueb">0</span>如果您的代碼的方式對Javascript不可見。

因此,您可以將Javascript放在</body>之前的末尾,或者您可以使用window.addEventListener('load', functionname, false);,以便代碼在頁面加載時運行。

也許這是你找什麼?

<!DOCTYPE html> 

<head> 

<title>Something</title> 

<style type="text/css"> 

    body, button { 
     margin: 20px; 
     font-size: 80px; 
     text-align: center; 
    } 

    button { 
     width: 2em; 
     height: 2em; 
    } 

</style> 

<script type="text/javascript"> 

'use strict'; 

var a = 0, 
    b = 100, 
    outputa = null, 
    outputb = null, 
    buttonadd = null, 
    buttonminus = null; 

function letsgo() { 

    outputa = document.getElementById('Valuea'); 
    outputb = document.getElementById('Valueb'); 
    buttonadd = document.getElementById('add'); 
    buttonminus = document.getElementById('minus'); 

    outputa.innerHTML = a; 
    outputb.innerHTML = b; 
    checkdisable(); 

} 

function add(valueToAdd) { 

    a += valueToAdd; 
    b -= valueToAdd; 

    outputa.innerHTML = a; 
    outputb.innerHTML = b; 

    checkdisable(); 

} 

function checkdisable() { 

    if(a <= 0) { 

     buttonminus.disabled = true; 

    } else { 

     buttonminus.disabled = false; 

    } 

    if(a >= 100) { 

     buttonadd.disabled = true; 

    } else { 

     buttonadd.disabled = false; 

    } 

} 

if (window.addEventListener) { 

    window.addEventListener("load", letsgo, false); 

} 

</script> 

</head> 

<body> 

<div> 
    Valuea:<span id="Valuea">X</span> 
    Valueb:<span id="Valueb">X</span> 
</div> 

<div> 
    <button type="button" id="add" onclick="javascript:add(1)">+</button> 
    <button type="button" id="minus" onclick="javascript:add(-1)">-</button> 
</div> 

</body>