HTML属性值被javascript更改后返回其初始值
假设我必须对文件进行图像处理，一个文件名为redflowers.jpg，另一个文件名为whiteflowers.jpg。
现在，我想创建一个名为htmlcss1.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>单击second button时，页面将显示白色花的图像，而单击first button时，该页面将显示红色花的图像。
为此，我在HTML页面的末尾编写了javascript代码，该代码更改html标记<img>的<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>我该怎么做？
回答 4
Stack Overflow用户
发布于 2019-12-05 18:25:44
单击“提交”按钮时，将运行该函数。
提交按钮将提交一份表单。
提交表单将向服务器发送表单数据，并加载服务器返回的新页。
如果你不想那样做，那就不要使用提交按钮！
您可以在完成表单时完全消除它，因为您一开始没有收集任何数据。
更改：
至：
<input type=button value="red flowers" onClick=f("./redflowers.jpg"); />
<input type=button value="white flowers" onClick=f("./whiteflowers.jpg"); />Stack Overflow用户
发布于 2019-12-05 18:25:55
所发生的事情是，页面是刷新后，您单击按钮，因为您的类型是“提交”。将类型更改为“按钮”
Stack Overflow用户
发布于 2019-12-05 18:33:54
因为您将按钮作为窗体的一部分，所以每次单击按钮时，都会提交表单并刷新页面。用普通的按钮代替：
function f(x) {
document.getElementById("id1").src = x;
}#id1 {
width: 150px;
height: 150px;
}<center><img id=id1>
<br/> <br/>
<button onClick="f('http://placekitten.com/150/150');">Red Flowers</button>
<button onClick="f('http://placekitten.com/140/140');">White Flowers</button>
</center>
https://stackoverflow.com/questions/59201179
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号