How to display multiple outputs using innerHTML?

Question

I am having this function inside script.

function arith()
{
    var n1 = parseInt(document.getElementById('num1').value, 10);
    var n2 = parseInt(document.getElementById('num2').value, 10);
    var newVal;
    if(op == "Operation 1")
    {
        newVal1 = n1 + n2;
    }
    else if(op == "Operation 2")
    {
        newVal2 = n1 - n2;
    }
    else if(op == "Operation 3")
    {
        newVal3 = n1 * n2;
    }
    else if(op == "Operation 4")
    {
        newVal4 = n1 / n2;
    }

    var demoP = document.getElementById("demo");
    {
        demoP.innerHTML = "Operation 1=" + newVal1;
        demoP.innerHTML = "Operation 2=" + newVal2;
        demoP.innerHTML = "Operation 3=" + newVal3;
        demoP.innerHTML = "Operation 4=" + newVal4;
    }

    return false;
}

When I call these innerHTML, can I use <p id="demo"></p> Is it enough or I need to call each elements?

Note that only one of the four newValX variables will be assigned a value within that function (because of the if/else if structure). Are they global variables? If they're not declared somewhere you'll get a reference error when you try to use the ones that haven't been assigned a value. — nnnnnn
– nnnnnn, Commented Dec 16, 2013 at 9:55

Kevin Bowersox · Accepted Answer · 2013-12-16 16:54:57Z

3

The invocation of innerHtml will override the content with each call. Build the HTML in a String prior to assignment to the innerHTML property.

var demoP = document.getElementById("demo");
{
                    var html = "";
                    html += "Operation 1=" + newVal1 + "<br/>";
                    html += "Operation 2=" + newVal2 + "<br/>";
                    html += "Operation 3=" + newVal3 + "<br/>";
                    html += "Operation 4=" + newVal4 + "<br/>";
                    demoP.innerHTML = html;
}

JS Fiddle: http://jsfiddle.net/D3xR3/

edited Dec 16, 2013 at 16:54

answered Dec 16, 2013 at 9:49

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Liam · Accepted Answer · 2013-12-16 09:50:39Z

2

You should use += instead of =, else it will over write your data.

demoP.innerHTML += "Operation 2=" + newVal2;

Calling it once should be enough.

edited Dec 16, 2013 at 9:50

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Dec 16, 2013 at 9:49

Pushkar

1126 bronze badges

Comments

nnnnnn · Accepted Answer · 2013-12-16 09:49:25Z

1

Your current code first sets the .innerHTML of your element to "Operation 1=" + newVal1 and then overwrites it three times with the other values. Perhaps you intended to concatenate all of your results together and put the results in that element:

demoP.innerHTML = "Operation 1=" + newVal1 + "<br>"
                + "Operation 2=" + newVal2 + "<br>"
                + "Operation 3=" + newVal3 + "<br>"
                + "Operation 4=" + newVal4;

answered Dec 16, 2013 at 9:49

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

Carlo · Accepted Answer · 2013-12-16 09:51:55Z

0

The best IMHO would be to concat the strings and the add at the lastest moment to the DOM (saves time)

var html = "Operation 1=" + newVal1;
html += "Operation 2=" + newVal2;
html += "Operation 3=" + newVal3;
html += "Operation 4=" + newVal4;

var demoP = document.getElementById("demo");
demoP.innerHTML = html;

Also, the brackets after demop are unneccessary

answered Dec 16, 2013 at 9:51

Carlo

2,11221 silver badges30 bronze badges

Comments

Md. Al-Amin · Accepted Answer · 2013-12-16 09:54:46Z

0

You do it in one line :

demoP.innerHTML = "Operation 1=" + newVal1 + "<br>"+ "Operation 2=" + newVal2 + "<br>"+ "Operation 3=" + newVal3 + "<br>"+"Operation 4=" + newVal4;

answered Dec 16, 2013 at 9:54

Md. Al-Amin

1,4411 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to display multiple outputs using innerHTML?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related