☰

如何通过按钮调用响应？HTML 和 Javascript

tag-icon • tag-icon html javascript
如何通过按钮调用响应？HTML 和 Javascript

我正在尝试弄清楚如何回调某人按下的按钮，而无需使用我低效的多个函数方法。代码如下。我测试过了，这对我来说是可行的，但我想知道是否有更有效的方法来做到这一点。

<!DOCTYPE html>
<html>

<head>

<title>Google Forms 3 -- Ben Klemp</title>

<script>
function inputButton() {
    var input, text;
    input = document.getElementById("input").value;
    input = input.toLowerCase();
    if (input.length <= 0) {
        alert("You must type your name here.");
    } else {
        document.getElementById("question1").hidden = "";
        document.getElementById("inputButton").hidden = "hidden";
        document.getElementById("initialQuestion").hidden = "hidden";
    };
};
function submit() {
    document.getElementById("question1").hidden = "hidden";
    document.getElementById("review").hidden = "";
    document.getElementById("responses1").innerHTML = "What is your name: " + document.getElementById("input").value;
};
function submit1() {
    document.getElementById("responses2").innerHTML = "Do you play video games: Yes"
};
function submit2() {
    document.getElementById("responses2").innerHTML = "Do you play video games: No"
};
</script>

</head>

<body>

<div><!--Heading and Initial Question-->
    <h1>Ben Klemp's Survey</h1>
    <div id="initialQuestion">
        <h3>What is your name?</h3>
        <input type="character" id="input">Type Name Here</input>
        <button type="button" id="inputButton" onclick="inputButton()">Submit</button>
    </div>
</div>

<div id="question1" hidden="hidden"><!--Question 1-->
    <h3>Do you play video games?</h3>
    <div id="questionButtons1">
        <button type="button" id="submit1" onclick="submit() + submit1()">Yes</button>
        <button type="button" id="submit2" onclick="submit() + submit2()">No</button>
    </div>
</div>

<div id="review" hidden="hidden">
<h2>Here are your responses:</h2>
<p id="responses1"></p>
<p id="responses2"></p>
</div>

</body>

</html>

相关内容