在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

散列是好是一個開關，請參閱：

http://jsfiddle.net/bbg9ozrr/1/

而且最好是用一種形式：

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

已經整理了一下。

Answer 2

創建有序陣列，如：

var arr = ["Fantasy World","Sir Wags A Lot","Take a Path"]; 

並通過其索引訪問它，這樣的：

var selection = arr[x-1]; 

其中 「x」 是從用戶的輸入。

Answer 3

您可以放置​​一個按鈕，在HTML與display:none

<button id="changeText" onclick="anotherFunction()" style="display:none;">Confirm</button> 

那麼如果有人按下submit，使人們看到按鈕

if (x == 1) { 
    text = "Fantasy World"; 
    document.getElementById("changeText").style.display = ""; 
} 

而在其他功能，您可以將文本更改爲confirmed order

function anotherFunction(){ 
    document.getElementById("demo").innerHTML = "Confirmed order"; 
    document.getElementById("changeText").style.display = "none"; 
} 

看到它的工作http://jsfiddle.net/Sourabh_/h74qjo5z/2/

我相信還有其他解決方案，但這可能會幫助你。

Answer 4

所要求的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); 

...和代碼的其餘部分在此鏈接：WORKING DEMO

Answer 5

我認爲你需要像下面使用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> 

C赫克Fiddle.

Answer 6

您可以使用下面一塊代碼 -

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