javascript - 尝试使用 document.getElementById ('' ).innerHTML 设置变量

Question

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

我正在尝试使用 document.getElementById(' ').innerHTML 设置一个变量，但我无法让它工作 - 当我尝试使用这个变量时，我只是返回“未定义”。

我见过的所有例子都说这应该有效，但事实并非如此，我束手无策。任何帮助将不胜感激。

这是代码...

<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';
}