单击按钮后显示在*div*中的文本作为标题1 <h1>，第二次单击<h2>等6之后，下一个文本(7)再次显示为<h1>
单击按钮后显示在*div*中的文本作为标题1 <h1>，第二次单击<h2>等6之后，下一个文本(7)再次显示为<h1>
提问于 2020-05-04 20:16:10
我想做一个文本框，按钮使用开关-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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-04 21:01:23
下面是一个使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61600836
复制相关文章
相似问题
腾讯云开发者
