2013-07-15 111 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>