Defining Variables in JavaScript and Creating Buttons?

Question

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? :)

@ Jamie Calver besides you problem you should use if else. — ozil
– ozil, Commented Apr 20, 2015 at 11:47
@Jamie You could use Hash instead of writing too many if statements — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented Apr 20, 2015 at 11:48
I know but I was having problems with Syntax so this made it easier. — Jamie Calver
– Jamie Calver, Commented Apr 20, 2015 at 11:48
@JamieCalver Here upto this jsfiddle.net/h74qjo5z working now what you want? — ketan
– ketan, Commented Apr 20, 2015 at 11:49
have you heard about switch statement && try x = parseInt(x); — Sahil Sharma
– Sahil Sharma, Commented Apr 20, 2015 at 11:51

Murli · Accepted Answer · 2015-04-20 12:08:24Z

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>

alexrogers · Accepted Answer · 2015-04-21 14:49:50Z

0

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.

answered Apr 21, 2015 at 14:49

alexrogers

1,5841 gold badge16 silver badges29 bronze badges

2 Comments

Jamie Calver Over a year ago

Hi Alex, I have used your code and I love it! However, is there a way in centering the Confirm button? I have tried to implement align="center" into span.innerHTML = '<button type="button" id="confirm" name="confirm" align="center">Confirm</button>'; but have had no luck... Could you help?

alexrogers Over a year ago

The container surrounding it (the parent) should be display:block or naturally a block level element (such as a div) and the parent should have text-align: center; on it. See jsfiddle.net/bbg9ozrr/2 styles should ideally live in the CSS. Plz mark as the correct answer and or upvote as you see fit. Thanks, Alex

cyber_rookie · Accepted Answer · 2015-04-20 11:52:46Z

0

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.

answered Apr 20, 2015 at 11:52

cyber_rookie

6655 silver badges9 bronze badges

Comments

Zee · Accepted Answer · 2015-04-20 11:57:55Z

0

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.

answered Apr 20, 2015 at 11:57

Zee

8,4805 gold badges39 silver badges59 bronze badges

Comments

ketan · Accepted Answer · 2015-04-20 12:07:13Z

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.

Vikrant · Accepted Answer · 2015-04-20 12:08:45Z

0

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

edited Apr 20, 2015 at 12:08

answered Apr 20, 2015 at 12:00

Vikrant

5,05218 gold badges53 silver badges77 bronze badges

1 Comment

Vikrant Over a year ago

@JamieCalver, is it helpful?

Collectives™ on Stack Overflow

Defining Variables in JavaScript and Creating Buttons?

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related