Question

我想用两个按钮打印这两个叫“是”和“否”的单词。当我点击第一个按钮打印“是”时，两个按钮被“是”字覆盖，我不知道如何解决它。我的代码和屏幕切割： before after

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>example</title>
	<script type="text/javascript">
		function yes()
		{
			document.write("YES");
		}
		function no()
		{
			document.write("NO");
		}
	</script>
</head>
<body>
	<button type="button" onclick="yes()">print yes</button>
	<button type="button" onclick="no()">print no</button>
</body>
</html>

Answer 1

这是因为您正在使用document.write（），这将覆盖页面。所以使用div来提出这个建议

以下是示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>example</title>
	<script type="text/javascript">
		function yes()
		{
		 document.getElementById("myDiv").innerHTML="YES";
		}
		function no()
		{
			document.getElementById("myDiv").innerHTML="NO";
		}
	</script>
</head>
<body>
  <div id="myDiv">
    
</div>
	<button type="button" onclick="yes()">print yes</button>
	<button type="button" onclick="no()">print no</button>
</body>
</html>

Answer 2

<强>为什么吗


您正在使用document.write()。

文档写入就像新页面或空体一样重写整个文档。然后使用`document.write的值打印（＆＃39;值＆＃39;

）`

如果您使用相同的页面声明显示某个元素。并使用innerHTML将数据传递给元素。

<强>演示

＆＃13;

function yes() {
  document.getElementById("demo").innerHTML = "YES";
}

function no() {
  document.getElementById("demo").innerHTML = "NO";
}

＆＃13;

<button type="button" onclick="yes()">print yes</button>
<button type="button" onclick="no()">print no</button>

<p id="demo"></p>

＆＃13;

Answer 3

检查此代码。在HTML文档完全加载后使用document.write（）将删除所有现有的HTML。如果你想在一个div中显示相同的YES或NO，那么使用这个

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<script type="text/javascript">
    function yes()
    {
        document.getElementById("content").innerHTML = 'YES';
    }
    function no()
    {
        document.getElementById("content").innerHTML = 'no';
    }
</script>
</head>
<body>
<div id="content"></div>

<button type="button" onclick="yes()">print yes</button>
<button type="button" onclick="no()">print no</button>

 </body>
 </html>

如果您想在不同区域的不同文字中显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<script type="text/javascript">
    function yes()
    {
        document.getElementById("yes").innerHTML = 'YES';
    }
    function no()
    {
        document.getElementById("no").innerHTML = 'no';
    }
</script>
</head>
<body>
<div id="yes"></div>
 <div id="no"></div>
<button type="button" onclick="yes()">print yes</button>
<button type="button" onclick="no()">print no</button>

 </body>
 </html>

了解更多信息

https://www.w3schools.com/jsref/met_doc_write.asp

我想用两个按钮打印这两个单词。但它没有像我成像那样工作。

3 个答案: