0

テキストボックスから要素を取得しようとしており、送信ボタンがクリックされた後に段落 id=message に表示され、メッセージが表示されますnameBox:foodBox

“Hello <name in namebox>! We want to let you know that <food in foodbox> has 50% discount in our restaurant!”

しかし、私はそれを行う方法を理解できません。私は何か（すべてではないにしても）間違っていると確信していますが、私はこれが初めてなので、何がわからないのですか。

<body>

    <br>
    <br>

 <div> 
 <p id="message"></p>  
 </div>   

    Enter your name: 
    <input type="text" id="nameBox" value=""><br>

    Enter your favorite food 
    <input type="text" id='foodBox' value=""><br>


<button id="submitButton">Submit</button>

<script>
   var parent=document.getElementById("message");
    var child=document.getElementById("nameBox");
parent.removeChild(child);
</script>

</body>
4

4 に答える 4

0

どうぞ ：

<html>
<head>

<script>


function showText(){

    var name=document.getElementById("nameBox").value;
    var food=document.getElementById("foodBox").value;

    document.getElementById("msg").innerHTML="Hello " + name + " ! We want to let you know that has 50% discount in our restaurant! for " + food;

}

</script>
</head>

<body>
<br>
<br>
<div id="msg"> 
</div>   

Enter your name: 
<input type="text" id="nameBox" value=""/><br>

Enter your favorite food 
<input type="text" id="foodBox" value=""/><br>


<input type="button" id="submitButton"  onclick="showText()" value="Submit" />

</body>
</html>

UI 関連の問題が見つかった場合は、firebug ( https://getfirebug.com/ ) を使用してみてください。UI で何が問題なのかを把握するのは非常に簡単です。

于 2013-10-11T16:30:44.510 に答える
0

HTML を確認してください。多分それはこのように見えるべきですか？

<div id="message"> 
    Enter your name: 
    <input type="text" id="nameBox" value=""><br>

    Enter your favorite food 
    <input type="text" id='foodBox' value=""><br>

    <button id="submitButton">Submit</button>
</div>
于 2013-10-11T16:10:25.647 に答える
0

送信ボタンをクリックして関数を呼び出し、メッセージを変更できます。

<input type="button" id="submit" value="Submit" onclick="somefunction()"/>

これがJavaScriptです：

function somefunction() {
  var fieldNameElement = document.getElementById('message');
  fieldNameElement.innerHTML = “Hello ! We want to let you know that has 50% discount in our restaurant!” ;
}

を変更する際に、innerHTML適切な書式タグを追加することもできます。

また、テーブルに入力を追加し、必要に応じて境界線と必要な書式を追加する必要があります。

<table>
<tr>
<td>
   Enter your name: 
</td>
<td>
    <input type="text" id="nameBox" value=""><br>
</td>
</tr>
<tr>
<td>
    Enter your favorite food 
</td>
<td>
    <input type="text" id='foodBox' value=""><br>
</td>
</tr>
</table>

あなたの人生を楽にするための多くのメソッドを提供するJavascriptライブラリの使用を考えることもできます.JQUERYをお勧めします.

乾杯 ！！

于 2013-10-11T16:07:07.140 に答える