从文本框中获取输入并将其写入下面

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

我迄今为止代码：

所有的

<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")); 
      }

来源

2015-06-14 Henny Schlebusch

它应该是'的document.getElementById（ “名”）。在你的上线value' – bugwheels94

刚提的是，['document.write']（https://developer.mozilla.org/en-US /docs/Web/API/document.write）不适合在此处使用。 – Teemu

首先，你不希望提交一个表单，所以从“提交”（默认）更改按钮类型“按钮”。

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

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

<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>

来源

2015-06-14 10:29:40 dfsq

这个解决方案无限地追加名称，例如，如果我想纠正我名下的拼写错误。取决于要求寿， – Lain

首先，你需要从停止提交表单。其次，你不应该使用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>

来源

2015-06-14 10:34:22 Lain

由于提交事件，你是对的。问题是代码片段工具当然没有提交表单;） – Blauharley

您需要取消提交事件，这使得表格提交，或者你可以不换一种形式元素中的一切，只是使用普通的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); 
}

来源

2015-06-14 15:15:54

从文本框中获取输入并将其写入下面

回答

相关问题