假设我要图像文件，一个名为 redflowers.jpg , 第二个是名字 whiteflowers.jpg
现在我想创建一个名为 htmlcss1.html 的网页, 最初显示
红色花朵的图像:
它在一个表单中有 2 个按钮:
<form style="text-align: center;" method=POST action=htmlcss1.html>
<input type=submit value="red flowers" onClick=f("./redflowers.jpg"); />
<input type=submit value="white flowers" onClick=f("./whiteflowers.jpg"); />
</form>
当您单击 second button ，页面显示的是白色花朵的图像，
当你点击 first button ，页面显示红色花朵的图像。
为了做到这一点，我在 HTML 页面的末尾写了一段 javascript 代码，
这改变了 src html标签的属性值<img>
<script language = "javascript" type = "text/javascript">
function f(x) {
document.getElementById("id1").src = x;
}
</script>
问题是，每当我点击 second button (展示白花)，
图像改变了一秒钟，显示出白色的花朵，但随后又变回红色的花朵
这是名为 htmlcss1.html 的 HTML 页面的完整代码:
<html>
<head>
<title> html - css (1) </title>
<link rel="stylesheet" type="text/css" href=css1.css>
<script language = "javascript" type = "text/javascript">
function f(x) {
document.getElementById("id1").src = x;
}
</script>
</head>
<body>
<center><img id=id1></center>
<!--<script language = "javascript" type = "text/javascript">
document.getElementById("id1").src = "./redflowers.jpg";
</script>-->
<br/> <br/>
<form style="text-align: center;" method=POST action=htmlcss1.html>
<input type=submit value="red flowers" onClick=f("./redflowers.jpg"); />
<input type=submit value="white flowers" onClick=f("./whiteflowers.jpg"); />
</form>
</body>
</html>
我必须做什么？
最佳答案
当您点击提交按钮时，您正在运行该函数。
提交按钮将提交一个表单。
提交表单会将表单数据发送到服务器并加载服务器发回的新页面。
如果您不想这样，请不要使用提交按钮!
您可以在使用表单时完全摆脱它，因为您一开始就没有收集任何数据。
改变:
<form style="text-align: center;" method=POST action=htmlcss1.html> <input type=submit value="red flowers" onClick=f("./redflowers.jpg"); /> <input type=submit value="white flowers" onClick=f("./whiteflowers.jpg"); /> </form>
到:
<input type=button value="red flowers" onClick=f("./redflowers.jpg"); />
<input type=button value="white flowers" onClick=f("./whiteflowers.jpg"); />
关于javascript - HTML 属性值在通过 javascript 更改后返回其初始值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59201179/