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?

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?

• javascript

• 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 Commented Dec 16, 2013 at 9:55

5 Answers 5

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

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

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

Calling it once should be enough.

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;

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

You do it in one line :

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