Question

我有一个代码，一个数学表编码器实际上..如果有人按下按钮，该函数被调用并且正在运行..但是当我点击按钮时，该表将进入新页面而不是在同一页面..

    <!doctype html>
<html>
<head>
    <title>Tafel Trainer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section id="content">
    <p>Wilt u de tafels leren? Klik op de knop oefenen</p>
    <button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()';>Tafel oefenen!</button>
<div id="1">
    <script type='text/javascript'>
    function oefenen(){
            var num = prompt("Zet een cijfer neer", "0");
            var num1 = parseInt(num); 



                for(i= 1; i< 11; i++) {
                    document.writeln("<table border='1'><tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr></table>");
                                    }

                    }   

</script>

</div>
    </section>
</body>
</html>

我已经尝试过使用document.getElementByID（＆＃39; div1＆＃39;）。innerHTML = i;但是那段代码也没有用，我确定它是初学者的错，但是：）？

提前致谢！

Answer 1

在这里工作正常。 ##编辑后，上面的评论想要按下按钮

＆＃13;

function oefenen() {
  var num = prompt("Zet een cijfer neer", "0");
  var num1 = parseInt(num);

  for (i = 1; i < 11; i++) {
    document.getElementById('results').innerHTML+=("<tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr>");
  }

}

＆＃13;

<section id="content">
  
  <p>Wilt u de tafels leren? Klik op de knop oefenen</p>
  
  <button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()' ;>Tafel oefenen!</button>
  
  <table border="1" id=
"results">
    </table>
  
</section>

＆＃13;

Answer 2

如果您的桌子有div占位符，您可以更好地控制自己在做什么，例如

＆＃13;

function oefenen(){
	var num = prompt("Zet een cijfer neer", "0");
	var num1 = parseInt(num); 
	var table = document.getElementById("tablebody");

	for(var i= 1; i< 11; i++) {
		var td = document.createElement("td"); //create TD
		td.innerHTML = i + " x " + num1 + " = " + (i * num1);
		var tr = document.createElement("tr");
		tr.appendChild(td); //add TD to the TR
		table.appendChild(tr); //add TR to the table
	}
                //show the placeholder
	document.getElementById("placeholder").style.display = ""; 
}

＆＃13;

<section id="content">
<p>Wilt u de tafels leren? Klik op de knop oefenen</p>
<button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()';>Tafel oefenen!   </button>
<div id="1"> <!-- I'm not sure what you use this div for -->
</div>
<div id="placeholder" style="display:none;"> <!-- Placeholder area -->
	<table border="1" id="tablebody"></table>
<div>
</section>

＆＃13;

另请注意我在循环中如何var i - 否则您在窗口级别创建对i的引用，而不是仅限于该函数的范围。

此外，createElement的使用可能看起来很冗长 - 但是当你创建任何复杂的标记时，更喜欢设置innerHTML和连接字符串等。当然更容易追踪正在进行并将部分分解为其他功能。

Answer 3

＆＃34;如果对加载的HTML文档执行document.write（）方法，则所有HTML元素都将被覆盖＆＃34; 表示w3schools

I think it is better to use innerHTML

Answer 4

根据您的要求编码打印所需数字的乘法表....

     <!doctype html>
<html>
<head>
    <title>Tafel Trainer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <section id="content">

  <p>Wilt u de tafels leren? Klik op de knop oefenen</p>

  <button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()' ;>Tafel oefenen!</button>
  <br />  <br />
  <div id="math">

  </div>

</section>
<script>
function oefenen() {
  var num = prompt("Zet een cijfer neer", "0");
  var num1 = parseInt(num);

  for (i = 1; i < 11; i++) {
    document.getElementById('math').innerHTML+=(num1 + " x " + i + " = " + i * num1 + "<br/>");}

}
</script>
</body>
</html>

动态创建的HTML表打开新页面

4 个答案: