0

我正在尝试从文本框中获取元素，nameBox并foodBox在单击提交按钮后显示在段落 id=message 中，并显示以下消息：

“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

1

那是因为父母不是孩子的父母。为此，请编辑您的代码以将两个输入元素放在<p>标签内：

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

    Enter your favorite food 
    <input type="text" id='foodBox' value=""><br>
</p>
于 2013-10-11T16:08:40.713 回答
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 回答
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

干得好 ：

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

您可以根据需要进行对齐，尝试使用 firebug ( https://getfirebug.com/ ) 以防发现与 UI 相关的问题。很容易找出 UI 中的问题

于 2013-10-11T16:30:44.510 回答