Jamie Calver
Jamie Calver

Reputation: 3

Defining Variables in JavaScript and Creating Buttons?

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

Answers (6)

alexrogers
alexrogers

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

Vikrant
Vikrant

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

Murli
Murli

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

ketan
ketan

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

Zee
Zee

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

cyber_rookie
cyber_rookie

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

Related Questions