如何解决:[object HTMLHeadingElement]

时间:2019-05-24 02:00:15

标签: javascript html

我正在尝试将创建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)
}

我希望该值出现在输出框中。谢谢

0 个答案:

没有答案