Question

我想添加一个变量b，它以值100开始。当我点击值a的添加按钮时，它会将值a加1，但减去100表示1，负按钮表示反之亦然。

<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>

Answer 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>

Answer 2

在浏览器中按F12（或其他），然后在控制台中查看。重新加载页面，您可以在Javascript代码中看到错误。

<span id="Valueb">0</span>如果您的代码不像Javascript那样可见。

因此，您可以在</body>之前将Javascript放在最后，或者可以使用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>

当从值b添加值减去时

2 个答案: