使用 onclick 和 javascript 函数更改值

Question

我正在尝试更改值“qa”。 js 函数工作正常。但是，我无法在跨度之间更改值“ID1”。当我单击图像按钮加号时，我想将值更改为 2，即一步更改值，另请参见屏幕截图。截图中的值1来自document.write(qa)。我是新手，希望得到任何帮助，谢谢！

Image: click on plus to change value with step 1 like from 1 to 2

   
var qa = 1;

function adq(x) {
  qa = qa + x;
}

<html>
<div id="Group_1">
  <input type="image" id="Goup_m_1" src="some.png" name="submit_plus" onclick="adq(1)">
  <div id="Value">
    <span>Value</span>
  </div>
  <div id="ID1">
   <span>
     <script>
         document.write(qa);
     </script>
   </span>
</html>

Answer 1

看事件顺序：

声明变量并赋值1
将该变量的值 (1) 写入文档
单击按钮并将变量的值更改为 2

第 2 步发生在第 3 步之前！

值的更改不会及时返回，因此当您读取它以将其传递给 document.write 时，它是 2。

如果要更改文档中的文本节点，则需要显式更改该文本节点。

MDN 有一个 guide to manipulating documents.

Answer 2

要显示增量值，您必须获取 div (document.getElementById("ID1")) 并以这种方式设置 innerHTML 属性：

function adq(x) {
  qa = qa + x;
  document.getElementById("ID1").innerHTML = qa;
}

<html>
<div id="Group_1">
  <input type="image" id="Goup_m_1" src="some.png" name="submit_plus" onclick="adq(1)">
  <div id="Value">
    <span>Value</span>
  </div>
  <div id="ID1">
   <span>
     <script>
         var qa = 1;
         document.write(qa);
     </script>
   </span>
   </div>
</html>

Answer 3

现在可以了。我创建了两个 js 函数。一个用于计算新值，一个用于显示增量值。 onclick 之后它调用这两个函数并在 span id=qa 中显示新值，它从值 1 开始。

谢谢大家的帮助！

var qa = 1;

        function adq() {
            qa = qa + 1;
        }

        function display() {
            document.getElementById("qa").innerHTML = qa;
        }

<html>
<div id="Group_1">
  <input type="image" id="Gruppe_maskieren_1" src="Gruppe_maskieren_1.png" name="submit_adults_plus" onclick="adq();display();">
  <div id="Value">
    <span>Value</span>
  </div>
  <div id="ID1">
  <span id="qa">1</span> 
   </div>
</html>

使用 onclick 和 javascript 函数更改值

Change value with onclick and javascript function

javascript

document.write

imagebutton

buttonclick