网页上的文本框，输出H1至H6并重复

Question

我不想让任何人做我的作业，我只是想问问是否有人可以以正确的方式建议我，然后再有更多的人发表这样的评论。

我要分配一个带有文本框和按钮的网页。 用户必须在文本框中输入文本，并在按下按钮时将其显示在H1中。 再次按下时，它应显示在H2中，直到H6，然后重复显示到H1。

上一个作业要求我创建一个“文本框”和一个“按钮”，它们仅以普通字母显示用户文本。

这是代码：

<!DOCTYPE html>
<html lang="nl">
<head>
  <title>Paragraaf op tekstvlak.</title>
  <script>
    var index = 1;

    window.onload = function() {
      document.getElementById('btnKnop1').onclick = function() {
        var newElement = document.createElement('div');
        newElementid = 'div' + index++;

        var node = document.getElementById('txtElement').value;
        var newNode = document.createTextNode(node);

        newElement.appendChild(newNode);

        console.log(newElement);
        document.getElementById('div-Result').appendChild(newElement);
      }
    }
  </script>
</head>
<body>
  <p>Type hier een boodschap die u in de webpagina wilt zetten</p>
  <input type="text" id="txtElement"><br>
  <button id="btnKnop1">klik hier voor Heads.</button><br>
  <div id="div-Result"></div>
</body>
</html>

如果有人可以给我建议解决这个难题并将此代码更改为作业所要求的内容，我将不胜感激。 我想我需要使用循环，但是我不确定如何使用。 该脚本不能包含jQuery。

Answer 1

您可以创建h标签并更新index ，而不是div 。因此，当index小于7时，您可以创建h+index标签。 此外，如果将script放在body标签的结尾附近，也不需要window.load

 var index = 1; document.getElementById('btnKnop1').onclick = function() { if (index < 7) { var newElement = document.createElement('h' + index); var node = document.getElementById('txtElement').value; var newNode = document.createTextNode(node); newElement.appendChild(newNode); document.getElementById('div-Result').appendChild(newElement); index++; } }

 <p>Type hier een boodschap die u in de webpagina wilt zetten</p> <input type="text" id="txtElement"><br> <button id="btnKnop1">klik hier voor Heads.</button><br> <div id="div-Result"></div>

Answer 2

可以使用h标签代替div。 更正后的代码如下所示，而不是div，您可以创建h标签

var index = 1;

document.getElementById('btnKnop1').onclick = function() {
    var newElement = document.createElement('h' + index);
    var node = document.getElementById('txtElement').value;
    var newNode = document.createTextNode(node);

    newElement.appendChild(newNode);
    document.getElementById('div-Result').appendChild(newElement);
    index = ++index % 7;
}

<p> Welcome to web designing.</p>
<input type="text" id="txtElement"><br>
<button id="btnKnop1">Change Heading Style</button><br>
<div id="div-Result"></div>

网页上的文本框，输出H1至H6并重复

问题描述

2 个解决方案

解决方案1
1 2018-07-01 15:54:31

解决方案2
0 2018-07-01 16:04:45

网页上的文本框，输出H1至H6并重复

问题描述

2 个解决方案

解决方案1 1 2018-07-01 15:54:31

解决方案2 0 2018-07-01 16:04:45

解决方案1
1 2018-07-01 15:54:31

解决方案2
0 2018-07-01 16:04:45