我正在尝试将创建whatsapp状态示例的网页放在一起。我设法完成了从文档中获取所有数据的操作,但是输出它有点麻烦。我总是在框中得到[object HTMLHeadingElement]
我尝试使用innerHTML,但仍然无法正常工作
HTML
<div class="container">
<div id="main" class="card card-body">
<h2 class="title">Items</h2>
<br>
<div id="box" style="position: relative; width: 100%; height:400px; background: #e3e3e3">
<h3 style="color:white; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
position: absolute;
align-content: stretch;
left: 0;
top: 50%;
max-height: 0%;
width: 100%;" class="text-center" id="h1" >Hello</h3>
</div>
<br>
<h2 class="title text-center mb-3">Add Status</h2>
<form class="form-inlne mb-3 text-center" id="addForm">
<textarea id="text-box" maxlength="250" style="height:150px; padding: 12px 20px; box-sizing: border-box; resize: none;"
class="form-control"></textarea>
<select class="form-control mr-2" id="option">
<option value="e3e3e3">Default</option>
<option value="A9D6DB">2</option>
<option value="9CDC17">3</option>
<option value="17DC81">4</option>
</select>
<input type="submit" class="btn btn-dark" value="Submit" id="submit">
</form>
<br>
<div id="output">
</div>
</div>
</div>
Java Script
//Whatsapp status sample
var text = document.getElementById('text-box');
var h1 = document.getElementById('h1');
var box = document.getElementById('box');
var option = document.getElementById('option');
var submit = document.getElementById('submit');
var output = document.getElementById('output');
text.addEventListener('keyup', getText);
option.addEventListener('click', changeBackground);
submit.addEventListener('click', createDiv);
function getText(e) {
// console.log(text.value);
teXt = text.value;
h1.innerHTML = teXt;
// box.innerHTML.style = back
}
function changeBackground(e) {
// console.log(option.value)
box.style.backgroundColor = `#${option.value}`
}
function createDiv(e) {
e.preventDefault();
textValue = text.value;
var h3 = document.createElement('h3')
h3.style.fontFamily = "color:white; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif";
h3.style.position = "absolute";
h3.style.alignContent = "stretch";
h3.style.left = 0;
h3.style.top = "50%";
h3.style.maxHeight = "0%";
h3.style.width = "100%";
h3.textContent = textValue;
// h3.appendChild(document.createTextNode(textValue));
var div = document.createElement('div')
div.style = "position: relative; width: 100%; height:400px; background: #e3e3e3";
div.style.position = "relative";
div.style.height = "400px";
div.style.width = "100%";
div.style.background = `#${option.value}`;
div.style.marginBottom = "15px"
div.innerHTML = h3
// div.appendChild((h3));
output.appendChild(div)
console.log(h3.textContent)
}
我希望该值出现在输出框中。谢谢