CODEWITHSUNDEEP
javascripthtml
Samir
Samir

Reputation: 3187

Input text boxes keep disappearing

I'm pretty new to javascript and I was wondering why the text boxes keep disappearing, when I click the button.

Here is my code:

<html>
    <head>
    </head>
        <body>

            <script>

                function readBox() 
                {
                    var a = document.getElementById('a').value;
                    var b = document.getElementById('b').value;
                    document.write(Number(a) * Number(b));
                }

            </script>

            <input type='text' size='29' id='a' placeholder='Enter number here...'>
            <input type='text' size='29'id='b' placeholder='Enter second number here...'>
            <input type='button' value='READ' onclick='readBox()'>

        </body>
<html>

And how do I put the document.write() under the text input, so it changes every time the button is clicked?

Upvotes: 2

Views: 1240

Answers (4)

Vijay
Vijay

Reputation: 8451

try out this..

<html>
<head>
</head>
<body>

<script>

function readBox()
{
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;
    document.getElementById('output').innerText=parseInt(a) * parseInt(b);
}


</script>

<input type='text' size='29' id='a' placeholder='Enter number here...'>
<input type='text' size='29'id='b' placeholder='Enter second number here...'>
<input type='button' value='READ' onClick='readBox()'>

<input type='text' size='29' id='output' placeholder='answer...'>  // to show result here...


</body>
<html>

Upvotes: -1

chengjf
chengjf

Reputation: 34

U can try this code:

<html>
<head></head>
<body>

<script>

function readBox()
{
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;
    //document.write(Number(a) * Number(b));
    document.getElementById('output').value = Number(a) * Number(b);
}
</script>

<input type='text' size='29' id='a' placeholder='Enter number here...'>
<input type='text' size='29'id='b' placeholder='Enter second number here...'>
<input type='text' size='29'id='output' placeholder='Output here...'>
<input type='button' value='READ' onClick='readBox()'>

</body>
<html>

U NEW one input to place your result.And change the result by function readBox.

Upvotes: 0

Marek Schubert
Marek Schubert

Reputation: 105

    <html>
<head>
</head>
<body>

<script>

function readBox()
{
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;
    document.getElementById('output').innerText=Number(a) * Number(b);
}


</script>

<input type='text' size='29' id='a' placeholder='Enter number here...'>
<input type='text' size='29'id='b' placeholder='Enter second number here...'>
<input type='button' value='READ' onClick='readBox()'>


<div id="output"></div>

</body>
<html>

document.write function will erase whole page and then will write...

Upvotes: 0

user2625787
user2625787

Reputation:

Don't use document.write. It wipes out your whole document. Instead, have an element where you can write data, like

<p id="output"></p>

Then code it like this:

function readBox()
{
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;
    document.getElementById("output").innerHTML = Number(a) * Number(b);
}

Upvotes: 2

Related Questions