输入文本框不断消失

Input text boxes keep disappearing

本文关键字：消失 文本 输入      更新时间：2023-09-26

我对javascript很陌生，当我点击按钮时，我想知道为什么文本框一直消失。

这是我的代码：

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

我如何将document.write（）放在文本输入下，以便每次单击按钮时它都会更改？

不要使用document.write。它会擦除整个文档。相反，有一个可以写入数据的元素，比如

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

然后这样编码：

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

    <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函数将擦除整个页面，然后写入。。。

U可以尝试以下代码：

<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一个输入来放置您的结果。并通过函数readBox更改结果。

试试这个。。

<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>
相关文章：