Question

我创建了一个简单的简单javascript程序，当我单击两个按钮时，我生成随机数，第三个按钮允许我将两个数字相加，然后我可以重置。

<html lang="en">
<head>
<title>createTextNode example</title>
</head>

<body>
  <button onclick="addTextNode1('Hi!');">N. 1</button>
  <button onclick="addTextNode('NO! ');">N. 2</button>
  <button onclick="test2('NO!.. ');">A! </button>
<button onclick="myFunction3()">Reset page</button>
  <hr />
  <p id="p2">1: </p>
  <p id="p1">2: </p>
  <p id="p3">T: </p>
</body>
</html>

function addTextNode(simple1) {
  text1 = Math.floor((Math.random() * 100) + 1);
  var newtext = document.createTextNode(text1+"     "),
      p1 = document.getElementById("p1");

  p1.appendChild(newtext);
}

function addTextNode1(simple2) {
  text2 = Math.floor((Math.random() * 100) + 1);
  var newtext = document.createTextNode(text2+"     "),
      p2 = document.getElementById("p2");

  p2.appendChild(newtext);
}


function myFunction3() {
    window.location.reload(true);
}

function test2() {
    text5 = text1 + text2;
    var newtext5 = document.createTextNode(text5),
      p3 = document.getElementById("p3");

     p3.appendChild(newtext5);
}

我的问题是如何通过appendChild方法替换按钮新显示的数字，这样当我再次单击该按钮时，前一个数字将被替换。

谢谢！非常感谢！

Answer 1

这里是第二个数字的例子。另一个的例子：

＆＃13;

function addTextNode(simple1) {
  
  text1 = Math.floor((Math.random() * 100) + 1);
  var newtext = document.createTextNode(text1+"     "),
      p1 = document.getElementById("p1");
  var p1Txt=p1.innerHTML; 
  var a=p1Txt.length;
  if(a>=3){
  p1.innerHTML='2: ';  
  p1.appendChild(newtext);
  }else{
    p1.appendChild(newtext);  
  }

＆＃13;

Answer 2

很高兴听到您正在编程！

关于onclick属性attaching events

的好帖子

如果您不止一次需要某些功能，请将其包装在一个函数中。（随机整数）。它使代码更清晰，您不需要重复自己。

检查一下。我打赌这个例子远非完美，但仍然提供一些见解

<html lang="en">
<head>
<title>createTextNode example</title>
</head>

<body>
  <button id="number1-generator">Number1Generator</button>
  <button id="number2-generator">Number2Generator</button>
  <button id="sum-button">CalculateSum</button>
<button id="reset-page">Reset page</button>
  <hr />
  <p>Number1: <span class="numbers" id="number1"></span></p>
  <p>Number2: <span class="numbers" id="number2"></span></p>
  <p>Sum: <span id="sum"></span></p>
</body>
</html>

<table>
    <tr>
        <td><input name="file" type="file"/></td>
        <td><input type="submit"/></td>
    </tr>
</table>

如何替换appendChild而不是添加到上一个appendChild？

2 个答案: