網頁上的文本框，輸出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