Question

我需要从输入框中获取值，并在点击按钮时将其写在输入框下方。我想用标签，但如果有另一种方式，我愿意接受建议。

到目前为止我的代码：

    <h1>Test</h1>
    <form name="greeting">
        Type your name here: <input type = "Text" name="fullname" id="name"> <button onclick="getName()">Create</button><br>
        Hello <label id="greet">Hello</label> 
    </form>
    <script lang="javascript">
     function getName() {
      var inputVal = document.getElementById("name").value;
      if (inputVal == "") {
                             document.getElementById("name").style.backgroundColor = "red";
                          }
     else {
            document.write("Hello " + document.getElementById("name"));
          }

Answer 1

首先，您不想提交表单，因此请更改＆＃34;提交＆＃34; （默认）到＆＃34;按钮＆＃34;。

然后你不应该使用document.write几乎从来没有，它在非常特殊的情况下使用。使用适当的DOM操作方法，如appendChild。我会使用方便的insertAdjacentHTML：

＆＃13;

function getName() {
    var input = document.getElementById("name");
    if (input.value == "") {
        input.style.backgroundColor = "red";
    } else {
        input.insertAdjacentHTML('afterend', '<div>' + input.value + '</div>');
    }
}

＆＃13;

<form name="greeting">Type your name here:
    <input type="Text" name="fullname" id="name" />
    <button type="button" onclick="getName()">Create</button>
    <br>Hello
    <label id="greet">Hello</label>
</form>

＆＃13;

Answer 2

首先，您需要停止提交表单。其次，你不应该使用document.write，因为它不会在输入字段后附加所需的文本。最后你需要验证元素值而不是元素本身。

<html>
    <head>
        <script>
            //First put the function in the head.
            function getName(){
                var input = document.getElementById("name");
                input.style.backgroundColor = ''; //Reseting the backgroundcolor

                if (input.value == ''){ //Add the.value
                    input.style.backgroundColor = 'red';
                }
                else{
                    //document.write('Hello ' + input.value); //This would overwrite the whole document, removing your dom.

                    //Instead we write it in your greeting field.
                    var tE = document.getElementById('greet');
                    tE.innerHTML = input.value;
                }

                return false //Prevent the form from being submitted.
            }
        </script>
    </head>

    <body>
        <h1>Test</h1>
        <form name = 'greeting'>
            Type your name here: <input type = "Text" name="fullname" id="name"> <button onclick="return getName()">Create</button><br>
            Hello <label id="greet">Hello</label> 
        </form>
    </body>
</html>

Answer 3

您需要取消提交表单提交的提交事件，或者您无法将所有内容包装在表单元素中，只需使用正常的div，这样提交按钮就不会提交。

演示： https://jsfiddle.net/bypr0z5a/

注意原因我在javascript中附加事件处理程序并且在按钮元素上注意onclick属性是因为jsfiddle工作很奇怪，在普通页面上调用getName（）的方式会起作用。

byId('subBtn').onclick = function (e) {
    e.preventDefault();
    var i = byId('name'),
        inputVal = i.value;

    if (inputVal == "") {
        i.style.backgroundColor = "red";
    } else {
        byId('greet').innerText = inputVal;
        i.style.backgroundColor = "#fff";
    }
}

function byId(x) {
    return document.getElementById(x);
}

从文本框获取输入并在下面写

3 个答案: