Javascript將不會輸出輸入框中的值

-6

我想要用戶按下提交按鈕，以便他們的姓名和年齡顯示在輸入框中name="output"？Javascript將不會輸出輸入框中的值

我有3個輸入框，一個詢問姓名，另一個詢問年齡，另一個輸入框提供輸出。我正在嘗試使用功能output()來顯示上一個輸入框。

我很困惑我要去哪裏錯，我需要一個.value？

<!doctype html> 
<html> 
<head> 

<style> 
.formdiv{ 
    align: center; 
} 
</style> 
</head> 
<body> 

<script language="javascript" type="text/javascript"> 
    function output(){ 
     var name = getElementByName('firstName'); 
     var Age= getElementByName('age'); 
     var out = document.write(name+Age); 
     document.getElementByName('output') = out; 
    } 
</script> 

<h1><strong><em><center>Payment Details</center></em></strong> </h1> 
<div class="formdiv"> 
<fieldset><center> 
<legend> Enter the following Info:</legend> 
<br /> 
<label> Name </label> 
<input type="text" name="firstName" placeholder="John" required="required"></input> 
<br/> 
<br/> 
<label>Age </label> 
<input type="number" name="age" maxlength="2" required="required"></input> 
</fieldset> 
</center> 
</div> 
<div> 
<center> 
     <button onClick="output()">Submit</button><br/> 
<label for="output">Output</label> 
<br/> 
<input type="textbox" name="output"></input> 
</center> 
</div> 
</body> 
</html>

來源

2017-01-18 Kevin Farrell

什麼'getElementByName（）'？ – Pointy

我想使用名稱屬性來捕獲用戶輸入的內容，以便獲取用戶名稱「firstName」被使用 –

下面是固定代碼：https：//jsfiddle.net/sa71h00b/（這是*方式*爲時尚早你需要在SO上張貼，你需要做很多*更多的研究，首先需要一個免費的JavaScript課程，我推薦codecademy） –

有一個幾件事情你的代碼錯誤：

沒有爲getElementByName沒有這樣的事情 - 這是getElementById
改變上述情況，你需要ID添加到您的輸入元素
你需要使用返回對象的value從getElementById
以上會得到你的代碼的工作，但還可以，center標籤已經過時了，你不應該使用它
輸入是自行閉合的標籤，所以你不要「T需要</input>

<!doctype html> 
 
<html> 
 

 
<head> 
 

 
    <style> 
 
    .formdiv { 
 
     align: center; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <script language="javascript" type="text/javascript"> 
 
    function output() { 
 
     var name = document.getElementById('firstName').value; 
 
     var Age = document.getElementById('age').value; 
 
     var out = name + Age; 
 
     document.getElementById('output').value = out; 
 
    } 
 
    </script> 
 

 
    <h1><strong><em><center>Payment Details</center></em></strong> </h1> 
 
    <div class="formdiv"> 
 
    <fieldset> 
 
     <center> 
 
     <legend>Enter the following Info:</legend> 
 
     <br /> 
 
     <label>Name</label> 
 
     <input type="text" name="firstName" id="firstName" placeholder="John" required="required"></input> 
 
     <br/> 
 
     <br/> 
 
     <label>Age</label> 
 
     <input type="number" name="age" id="age" maxlength="2" required="required"></input> 
 
    </fieldset> 
 
    </center> 
 
    </div> 
 
    <div> 
 
    <center> 
 
     <button onClick="output()">Submit</button> 
 
     <br/> 
 
     <label for="output">Output</label> 
 
     <br/> 
 
     <input type="textbox" name="output" id="output"></input> 
 
    </center> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-01-18 15:52:40 Pete

這是您的代碼的工作版本。

有沒有方法getElementByName（但getElementsByName） - 你應該使用document.getElementById()（Read about it here）
，您應該使用輸入元素的value。

<!doctype html> 
 
<html> 
 
<head> 
 

 
<style> 
 
.formdiv{ 
 
    align: center; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<script language="javascript" type="text/javascript"> 
 
    function output(){ 
 
     var name = document.getElementById('firstName').value; 
 
     var Age= document.getElementById('age').value; 
 
     document.getElementById('output').value = name+Age; 
 
    } 
 
</script> 
 

 
<h1><strong><em><center>Payment Details</center></em></strong> </h1> 
 
<div class="formdiv"> 
 
<fieldset><center> 
 
<legend> Enter the following Info:</legend> 
 
<br /> 
 
<label> Name </label> 
 
<input type="text" id="firstName" placeholder="John" required="required"></input> 
 
<br/> 
 
<br/> 
 
<label>Age </label> 
 
<input type="number" id="age" maxlength="2" required="required"></input> 
 
</fieldset> 
 
</center> 
 
</div> 
 
<div> 
 
<center> 
 
     <button onClick="output()">Submit</button><br/> 
 
<label for="output">Output</label> 
 
<br/> 
 
<input type="textbox" id="output"></input> 
 
</center> 
 
</div> 
 
</body> 
 
</html>

來源

2017-01-18 15:46:27

getElementsByName（注：Elements，不Element）返回Element個列表，在這種情況下，你<input>秒。所以首先，你需要使用getElementsByName(...)[0]來選擇第一個（在你的情況下你只有一個）。然後你得到一個Element。

但是，您不希望輸出整個元素（這是一個Object，而不是一個String，並轉換爲一個字符串，它可能不會是你期望的），所以你需要選擇該屬性的值Element。所以，是的，你需要添加.value，就像你假設：

function output(){ 
    var name = getElementsByName('firstName')[0].value; 
    var Age= getElementsByName('age')[0].value;

然後，document.write寫入參數直接將新的文件，這導致了emtpy頁面，其他就沒有什麼，但該字符串。這不是你想要的，所以你不需要那個。你做想要的是分配與該字符串稱爲out新變量：

var out = name+Age;

然後分配新的值寫入到輸出領域 - 你不想用一個字符串替換Element（即甚至不工作），但它的價值，所以你再次需要.value：

document.getElementsByName('output')[0].value = out; 
}

這應該做的伎倆。

（除此之外，你可能想使用name + " " + Age，而不是簡單name+Age，否則你結束了「約翰Doe23」而不是「李四23」，你可能會想）

來源

2017-01-18 15:47:37

Javascript將不會輸出輸入框中的值

回答

相關問題