输出H1到H6并重复的网页上的文本框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了输出H1到H6并重复的网页上的文本框相关的知识，希望对你有一定的参考价值。
我不想让任何人做我的作业，我只是想问一下，在更多人提出这些评论之前，是否有人能以正确的方式告诉我。
我有一个任务，我必须创建一个带有文本框和按钮的网页。用户必须将文本放在文本框中，按下按钮时，它应显示在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。
答案
而不是div你可以创建h标签，并更新index.So而索引小于7你可以创建h+index标签。如果你把window.load放在script标签的末端附近，也不需要body
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>另一答案
而不是div你可以使用h标签。更正后的代码如下所示，您可以创建h标签而不是div
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并重复的网页上的文本框的主要内容，如果未能解决你的问题，请参考以下文章