Reputation: 3
Here's my code:
<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>
I need to make my code to give the user a button that confirms their order after entering a valid number into the input box.
For example:
if (x == 1) {
text = "Example"
}
then go from there to make another button that they can click to confirm that. Then they should be shown some text saying "confirmed order" - can anyone help me please? :)
Upvotes: 0
Views: 642
Reputation: 1584
A hash is good or a switch, see:
http://jsfiddle.net/bbg9ozrr/1/
Also is best to use a form:
<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>
Have tidied up a little too.
Upvotes: 0
Reputation: 5036
As required by OP to dynamically create a button element on click of existing button:
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);
... And rest of the Code as in this link: WORKING DEMO
Upvotes: 0
Reputation: 1258
You can use below piece of code-
<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>
Upvotes: 2
Reputation: 19341
I think you need something like following using 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>
Check Fiddle.
Upvotes: 0
Reputation: 8488
You can place a button in your html with display:none
<button id="changeText" onclick="anotherFunction()" style="display:none;">Confirm</button>
then if someone presses submit
, make the button visible
if (x == 1) {
text = "Fantasy World";
document.getElementById("changeText").style.display = "";
}
And in another function you can change the text to confirmed order
function anotherFunction(){
document.getElementById("demo").innerHTML = "Confirmed order";
document.getElementById("changeText").style.display = "none";
}
See it working http://jsfiddle.net/Sourabh_/h74qjo5z/2/
I am sure there are other solutions, but this might help you.
Upvotes: 0
Reputation: 665
Create an ordered array, like:
var arr = ["Fantasy World","Sir Wags A Lot","Take a Path"];
And access it by its index, like this:
var selection = arr[x-1];
where "x" is the input from the user.
Upvotes: 0