单击按钮后在* div *中将文本显示为标题1 ，第二次单击 等。6之后是下一个文本（第7个），作为 再次 ]] > 我想创建一个带有文本框，使用switch -case和按钮的ID为'divResult'的div的网站。如果单击按钮，它将文本框中的文本显示为标题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> 我想创建一个带有文本框，使用switch -case和按钮的ID为'divResult'的div的网站。如果单击按钮，则它将文本框中的文本显示为标题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>

问题描述 投票：0回答：1

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

javascript function switch-statement counter heading
1个回答
0
投票

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>

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.