javascript - 在 JavaScript 中定义变量并创建按钮？

Question

这是我的代码:

<input id="numb" type="number" align="center">

<button type="button" onclick="myFunction()" align="center">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    if (x == 1) {
        text = "Fantasy World";
    } 
    if (x == 2) {
    text = "Sir Wags A Lot";
    }
    if (x == 3) {
    text = "Take a Path";
    }
    if (x == 4) {
    text = "River Clean Up"
    }
    if (x == 5) {
    text = "Pinball"
    }
    if (x == 6) {
    text = "Ghost Girl"
    }
    if (x == 7) {
    text = "Dress Up"
    }
    if (x == 8) {
    text = "Where Is My Hat?"
    }
    if (isNaN(x) || x < 1 || x > 8) {
         text = "Input not valid";
    }

    document.getElementById("demo").innerHTML = text;
}
</script>

我需要编写代码，为用户提供一个按钮，在输入框中输入有效数字后确认其订单。
例如:

if (x == 1) {
    text = "Example"
}

然后从那里创建另一个按钮，他们可以单击该按钮来确认这一点。然后他们应该看到一些文字，上面写着“已确认的订单”——有人可以帮助我吗？ :)

Answer 1

您可以使用下面的代码-

<input id="numb" type="number" align="center">

<button type="button" onclick="myFunction()" id="primary" align="center">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text="Fantasy World";

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    if (x == 1 && document.getElementById("confirm")==null) {
        text = "Fantasy World";
        var demo=document.getElementById("demo");
        var span=document.createElement("span");

        span.innerHTML="<button onclick='confirmMessage()' id='confirm'>Confirm</button>";
        document.body.appendChild(span);
    } 
    if (x == 2) {
    text = "Sir Wags A Lot";
    }
    if (x == 3) {
    text = "Take a Path";
    }
    if (x == 4) {
    text = "River Clean Up"
    }
    if (x == 5) {
    text = "Pinball"
    }
    if (x == 6) {
    text = "Ghost Girl"
    }
    if (x == 7) {
    text = "Dress Up"
    }
    if (x == 8) {
    text = "Where Is My Hat?"
    }
    if (isNaN(x) || x < 1 || x > 8) {
         text = "Input not valid";
    }

    document.getElementById("demo").innerHTML = text;
}
function confirmMessage()
{
  alert("Confirmed order");
}
</script>