Fatal编程技术网
  • javascript/
  • 在JavaScript中定义变量并创建按钮？

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

javascript html

在JavaScript中定义变量并创建按钮？,javascript,html,Javascript,Html,这是我的密码： <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

这是我的密码：

<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>
然后从那里做另一个按钮，他们可以点击确认。然后他们会看到一些文字，上面写着“确认订单”-有人能帮我吗？：）

创建一个有序数组，如：

var arr = ["Fantasy World","Sir Wags A Lot","Take a Path"];
并通过其索引访问它，如下所示：

var selection = arr[x-1];
其中“x”是来自用户的输入。

您可以在html中放置一个按钮，显示：无

<button id="changeText" onclick="anotherFunction()" style="display:none;">Confirm</button>
在另一个功能中，您可以将文本更改为
确认订单

function anotherFunction(){
  document.getElementById("demo").innerHTML = "Confirmed order";
  document.getElementById("changeText").style.display = "none";
}
看到它工作了吗

我相信还有其他解决方案，但这可能会对您有所帮助。

根据OP的要求，在单击现有按钮时动态创建按钮元素：

var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
btn.onclick = function() { // Note this is a function
        document.getElementById("demo").innerHTML =   
            document.getElementById("demo").innerHTML+ " CONFIRMED";
};
document.body.appendChild(btn);
。。。剩下的代码如下链接所示：我认为您需要使用JavaScript实现如下功能：

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

<button type="button" onclick="myFunction()" align="center">Submit</button>
 <button id="conform" style="display:none;" onclick="dispMsg()">Confirm</button>
<p id="demo"></p>
   <p id="confirm"></p>

<script>
    function dispMsg(){
        document.getElementById("confirm").innerHTML = "Confirm";
    }

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;

    var data = document.getElementById("demo").innerHTML;

    if(data != "Input not valid")
    {
        document.getElementById("conform").style.display = 'block';
    }
}
</script>


提交
证实




函数dispMsg（）{
document.getElementById（“确认”）.innerHTML=“确认”；
}
函数myFunction（）{
变量x，文本；
//使用id=“numb”获取输入字段的值
x=document.getElementById（“numb”）.value；
如果（x==1）{
text=“幻想世界”；
} 
如果（x==2）{
text=“爵士摇摆不定”；
}
如果（x==3）{
text=“走一条路”；
}
如果（x==4）{
text=“河流清理”
}
如果（x==5）{
text=“弹球”
}
如果（x==6）{
text=“鬼女孩”
}
如果（x==7）{
text=“打扮”
}
如果（x==8）{
text=“我的帽子在哪里？”
}
如果（isNaN（x）| | x<1 | | x>8）{
text=“输入无效”；
}
document.getElementById（“demo”）.innerHTML=text；
var data=document.getElementById（“demo”）.innerHTML；
如果（数据！=“输入无效”）
{
document.getElementById（“符合”）.style.display='block'；
}
}
选中你可以使用下面的代码-

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


提交


函数myFunction（）{
var x，text=“幻想世界”；
//使用id=“numb”获取输入字段的值
x=document.getElementById（“numb”）.value；
if（x==1&&document.getElementById（“确认”）==null）{
text=“幻想世界”；
var demo=document.getElementById（“demo”）；
var span=document.createElement（“span”）；
span.innerHTML=“确认”；
document.body.appendChild（span）；
} 
如果（x==2）{
text=“爵士摇摆不定”；
}
如果（x==3）{
text=“走一条路”；
}
如果（x==4）{
text=“河流清理”
}
如果（x==5）{
text=“弹球”
}
如果（x==6）{
text=“鬼女孩”
}
如果（x==7）{
text=“打扮”
}
如果（x==8）{
text=“我的帽子在哪里？”
}
如果（isNaN（x）| | x<1 | | x>8）{
text=“输入无效”；
}
document.getElementById（“demo”）.innerHTML=text；
}
函数confirmMessage（）
{
警报（“确认订单”）；
}
哈希值是好的或是开关，请参阅：

最好使用以下表格：

<form action="" id="myform">
    <input id="numb" type="number" />

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

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

<script>
document.getElementById('myform').addEventListener('submit', function (e) {
    e.preventDefault();
    // Get the value of the input field with id="numb"
    var x = +document.getElementById('numb').value,
        text = 'Fantasy World',
        span;

    if (x === 1 && !document.getElementById('confirm')) {
        span = document.createElement('span');
        span.innerHTML = '<button type="button" id="confirm" name="confirm">Confirm</button>';
        document.body.appendChild(span);
        document.getElementById('confirm').addEventListener('click', function(){
            alert('Confirmed order');
        });
    }
    switch(x) {
        case 2:
            text = 'Sir Wags A Lot';
            break;
        case 3:
            text = 'Take a Path';
            break;
        case 4:
            text = 'River Clean Up';
            break;
        case 5:
            text = 'Pinball';
            break;
        case 6:
            text = 'Ghost Girl';
            break;
        case 7:
            text = 'Dress Up';
            break;
        case 8:
            text = 'Where Is My Hat?';
            break;
    }
    if (isNaN(x) || x < 1 || x > 8) {
         text = 'Input not valid';
    }

    document.getElementById('demo').innerHTML = text;
},false);

</script>


提交


document.getElementById（'myform'）。addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
//使用id=“numb”获取输入字段的值
var x=+document.getElementById（'numb'）.value，
text=‘幻想世界’，
跨度
如果（x==1&&！document.getElementById（'confirm'））{
span=document.createElement（'span'）；
span.innerHTML='Confirm'；
document.body.appendChild（span）；
document.getElementById（'confirm'）。addEventListener（'click'，function（）{
警报（“确认订单”）；
});
}
开关（x）{
案例2：
text=‘先生摇了很多’；
打破
案例3：
text='走一条路'；
打破
案例4：
text=‘河流清理’；
打破
案例5：
text='Pinball'；
打破
案例6：
text=‘鬼女孩’；
打破
案例7：
text=‘打扮’；
打破
案例8：
text=“我的帽子在哪里？”；
打破
}
如果（isNaN（x）| | x<1 | | x>8）{
text='输入无效'；
}
document.getElementById（'demo'）.innerHTML=text；
}，假）；
我也整理了一点。

@Jamie Calver除了你的问题之外，你应该使用
if-else
@Jamie你可以使用Hash而不是写太多
if
语句。我知道，但我在语法方面遇到了问题，所以这让事情变得更容易了。@JamieCalver现在开始工作你想要什么？你听说过
switch
语句&try
x=parseInt（x）@JamieCalver，这有用吗？嗨，Alex，我用过你的代码，我很喜欢！但是，有没有办法使确认按钮居中？我尝试将
align=“center”
实现为
span.innerHTML='Confirm'但是没有运气。。。您能帮忙吗？它周围的容器（父级）应该是display:block或一个块级元素（例如div），父级应该有文本align:center；在上面。请参阅样式应该理想地存在于CSS中。请将正确答案标记为正确答案，或根据您认为合适的方式进行投票。谢谢，亚历克斯

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



<form action="" id="myform">
    <input id="numb" type="number" />

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

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

<script>
document.getElementById('myform').addEventListener('submit', function (e) {
    e.preventDefault();
    // Get the value of the input field with id="numb"
    var x = +document.getElementById('numb').value,
        text = 'Fantasy World',
        span;

    if (x === 1 && !document.getElementById('confirm')) {
        span = document.createElement('span');
        span.innerHTML = '<button type="button" id="confirm" name="confirm">Confirm</button>';
        document.body.appendChild(span);
        document.getElementById('confirm').addEventListener('click', function(){
            alert('Confirmed order');
        });
    }
    switch(x) {
        case 2:
            text = 'Sir Wags A Lot';
            break;
        case 3:
            text = 'Take a Path';
            break;
        case 4:
            text = 'River Clean Up';
            break;
        case 5:
            text = 'Pinball';
            break;
        case 6:
            text = 'Ghost Girl';
            break;
        case 7:
            text = 'Dress Up';
            break;
        case 8:
            text = 'Where Is My Hat?';
            break;
    }
    if (isNaN(x) || x < 1 || x > 8) {
         text = 'Input not valid';
    }

    document.getElementById('demo').innerHTML = text;
},false);

</script>