Question

我对JavaScript完全陌生，我正在尝试自学一些东西 - 所以请保持温和。

我正在尝试使用document.getElementById（''）.innerHTML设置变量，但我无法使其工作 - 当我尝试使用此变量时，我只是返回“undefined”。

我所见过的所有例子都说这应该有效，但事实并非如此，而且我的斗智尽头。任何帮助将不胜感激。

这是代码......

<script>
var str = document.getElementById('str').innerHTML;

function calc()
{
  if(document.getElementById('checkbox').checked)
     document.getElementById('str').innerHTML = str ;     
  else
     document.getElementById('str').innerHTML='unchecked';
}

</script>

Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>

我的最终目标是使用另一个变量为变量“str”添加一个数字;所以... ...

var str = document.getElementById('str').innerHTML;
var add = 2
function calc()
{
  if(document.getElementById('checkbox').checked)
     document.getElementById('str').innerHTML = str + add;     
  else
     document.getElementById('str').innerHTML='unchecked';
}

我知道我可能需要将str变量解析为整数，但是在我到目前为止之前我已经跌跌撞撞了。

请帮忙。

Answer 1

str的值在页面加载时（在元素存在之前）确定。我相信你想要它calc：

function calc()
{
  var span = document.getElementById('str');
  var str = span.innerHTML;
  var add = 2;
  if(document.getElementById('checkbox').checked)
     span.innerHTML = str + add;     
  else
     span.innerHTML = 'unchecked';
}

Answer 2

问题是你的跨度低于脚本，实际上str仍然不存在。以下是一个有效http://jsfiddle.net/krasimir/2C25E/

的示例

<script>
function calc() {
    var str = document.getElementById('str').innerHTML;
    var add = 2;
    if(document.getElementById('checkbox').checked)
        document.getElementById('str').innerHTML = parseInt(str) + add;     
    else
        document.getElementById('str').innerHTML='unchecked';
}
</script>

Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>

此外，你应该使用parseInt来确保你得到一个数字而不是一个字符串。

Answer 3

如果您已将脚本包含在<head>标记的旁边，这将适用于您。

function calc() {

var str = document.getElementById('str').innerHTML;
//more code

Answer 4

试试这个，一个有效的版本和一个优化的位：

var str = document.getElementById('str');
var chk = document.getElementById('checkbox');
var add = 2
    function calc() {
        chk.checked ? str.innerHTML = parseInt(str.innerHTML) + add : str.innerHTML = 6;
    }
chk.onchange = function () {
    calc();
};

尝试使用document.getElementById（''）。innerHTML设置变量

4 个答案:

演示here