從文本框中獲取輸入並將其寫入下面

我需要從輸入框中獲取該值，並在點擊按鈕時將其寫入輸入框下方。我想用一個標籤，但如果有另一種方式，我願意接受建議。從文本框中獲取輸入並將其寫入下面

我迄今爲止代碼：

所有的

<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

從文本框中獲取輸入並將其寫入下面

回答

相關問題