时间戳

首页 > 解决方案 > HTML属性值通过javascript更改后返回其初始值

javascript - HTML属性值通过javascript更改后返回其初始值

问题描述

假设我要镜像文件，一个是named redflowers.jpg，第二个是namewhiteflowers.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（显示白花）时，图像会改变一秒钟并显示白花，但随后又转回显示红花

这是名为 的 HTML 页面的完整代码htmlcss1.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>

我必须做什么？

标签： javascripthtml

解决方案

当您单击提交按钮时，您正在运行该功能。

提交按钮将提交一个表单。

提交表单会将表单数据发送到服务器并加载服务器发回的新页面。

如果您不想这样，请不要使用提交按钮！

您可以在使用表单时完全摆脱它，因为您一开始没有收集任何数据。

改变：

<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"); />

推荐阅读