javascript - 如何调用一个或两个或两个复选框和文本输入

Question

我知道这是一个非常基本的问题，但我对 JavaScript 完全陌生，所以我很绝望。我已经倾注了如何解决这个问题，但我无法弄清楚。我需要调用第一个标题或第二个标题或两者以及名称。我该怎么做呢？谢谢!!

<script type="text/javascript">
function ack(){
var name = document.forms[0].elements[0];
var nameValue = name.value;
var title1 = document.forms[0].elements[1];
var title1Value = title1.value;
var title2 = document.forms[0].elements[2];
var title2Value = title2.value;
alert("Thank you for ordering " +title1Value +title2Value +nameValue);
}
</script>

<form>
<h3>Now Available!</h3> <h4>Happy Traveling 2: More Layouts for the Travel Scrapbooker</h4><br/><br/>
<h3>Also available:</h3> <h4>Happy Traveling: Layouts for the Travel Scrapbooker</h4><br/><br/>
<h4>Order today!</h4><br/><br/>
<label>Name:</label>
<input type="text" id="name"/><br/><br/>
<input type="checkbox" id="title1" value="Happy Traveling"/>Happy Traveling<br/>
<input type="checkbox" id="title2" value="Happy Traveling 2"/>Happy Traveling 2<br/><br/>
<input type="submit" value="Submit" onclick="ack();"/>
</form>

Answer 1

一些建议:
1 使用 document.getElementById("your id") 获取页面元素。它更加高效和可读。所以你的代码应该修改为:

var name = document.getElementById("name");

2 无论是否勾选，title1 的值始终返回“Happy Traveling”。你应该检查一下是否已检查。您可以使用“checked”属性。

var title1 = document.getElementById("title1");
var title1Value = "";
if(title1.checked){
    title1Value = title1.value;
}

3 在提交表单之前，您应该检查姓名是否为空。
4 有关 javascript/html 的更多信息，请查看w3schools了解更多详情。
希望对您有所帮助。

修改后的代码:

function ack(){
    var name = document.getElementById("name");
    var nameValue = name.value;
    var title1 = document.getElementById("title1");
    var title1Value = "";
    if(title1.checked){
        title1Value = title1.value;
    }
    var title2 = document.getElementById("title2");
    var title2Value = "";
    if(title2.checked){
        title2Value = title2.value;
    }
    alert("Thank you for ordering " +title1Value +title2Value +nameValue);
}