单击按钮后在 div 中显示文本作为标题 1 <h1>，第二次单击 <h2> 等。6 之后，下一个文本（第 7 个）再次显示为 <h1>

Question

我想制作一个带有文本框、按钮的网站，使用 switch -case 和 div id 'divResult'。如果单击按钮，它会将文本框中的文本显示为标题 1 <h1>，第二次单击后显示为 <h2> 等。在 6 之后，下一个文本（第 7 个）再次显示为 <h1>。它仅在最后一步（h1-h6 中的文本）不起作用时才正确工作。

<!Doctype HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>7-3</title>
  <script >
    
var index = 1;
var countClicks = 0;

window.onload = function () {
  document.getElementById('btnKnop').onclick = function () {

    var newElement = document.createElement('div');
    newElement.id = 'div' + index++;
    
    var node = document.getElementById('txtElement').value;
    var newNode = document.createTextNode(node);
    
    newElement.appendChild(newNode);

    
    console.log(newElement);
    document.getElementById('divResult').appendChild(newElement);


  countClicks++;
  switch (countClicks) {
    case 1: {
      console.log('heading text 1');
      break;
    }
    case 2:{
      console.log('heading text 2');
      break;
    }
    case 3:{
      console.log('head text 3');
      break;
    }
    case 4:{
      console.log('heading text 4');
      break;
    }
    case 5:{
      console.log('heading text 5');
      break;
    }
    case 6:{
      console.log('heading text 6');
      countClicks = 0;
      break;
      }
    }
       
  };
};  
  </script>
</head>
<body>
  <input type="text" id="txtElement">
  <button id="btnKnop">Add</button>
  <div id="divResult"></div>
  

</body>


</html>

Answer 1

这是一个使用你的 HTML 和小 JS 的例子，你不需要 switch 语句

var txtInput = document.querySelector("#txtElement"),
  resultElement = document.querySelector("#divResult"),
  ind = 0;

document.querySelector("#btnKnop").onclick = function() {
  ind = ind++ === 6 ? 1 : ind;
  resultElement.innerHTML += `<h${ind}>${txtInput.value}</h${ind}>`;
}

<input type="text" id="txtElement">
<button id="btnKnop">Add</button>
<div id="divResult"></div>

因为你需要使用 switch 语句来执行它可以是这样的：

var txtInput = document.querySelector("#txtElement"),
  resultElement = document.querySelector("#divResult"),
  countClicks = 1;

document.querySelector("#btnKnop").onclick = function() {
  var h = "";
  switch(countClicks++) {
    case 1: h = "h1"; break;
    case 2: h = "h2"; break;
    case 3: h = "h3"; break;
    case 4: h = "h4"; break;
    case 5: h = "h5"; break;
    case 6: h = "h6"; countClicks = 1; 
  }
  resultElement.innerHTML += `<${h}>${txtInput.value}</${h}>`;
}

<input type="text" id="txtElement">
<button id="btnKnop">Add</button>
<div id="divResult"></div>

单击按钮后在 div 中显示文本作为标题 1 <h1>，第二次单击 <h2> 等。6 之后，下一个文本（第 7 个）再次显示为 <h1>

After click on button show in the div the text as heading 1 <h1>, second click <h2> etc. After 6, is next text (7th) as <h1> again

javascript

counter

function

switch-statement

heading

单击按钮后在 *div* 中显示文本作为标题 1 <h1>，第二次单击 <h2> 等。6 之后，下一个文本（第 7 个）再次显示为 <h1>

After click on button show in the *div* the text as heading 1 <h1>, second click <h2> etc. After 6, is next text (7th) as <h1> again

javascript

counter

function

switch-statement

heading

单击按钮后在 div 中显示文本作为标题 1 <h1>，第二次单击 <h2> 等。6 之后，下一个文本（第 7 个）再次显示为 <h1>

After click on button show in the div the text as heading 1 <h1>, second click <h2> etc. After 6, is next text (7th) as <h1> again