我正在尝试使用按钮创建一个动态HTML更新

I'm trying to create a dynamic HTML update using a button

本文关键字：一个 动态 更新 HTML 创建 按钮      更新时间：2023-09-26

我是Javascript的新手，这是我第一次创建自己的函数。我试图根据用户是否点击我创建的按钮来改变链接的颜色。代码如下:

<p align="center">
    <input type="button";
           onclick="changelinks"
           value = "Click this if you can't see the links!"/>
</p>

这是我的函数的代码。

<script type="text/javascript">
              function changelinks(links) {
                var element = document.getElementByClass("links");
                element.onclick.color = "#00FF7F";
                 }
                 </script>
你有什么建议使我的函数工作吗?我如何将我的功能链接到按钮?

其中，有一些主要问题:

1。没有getElementByClass，只有getElementsByClassName或getElementById

2。element.onclick.color = "#00FF7F";是错误的。

3。type="button"; onclick="changelinks"不应该有;, changelinks需要()

试试这个:

<script type="text/javascript">
    function changelinks() {
        var element = document.getElementById("links");
            element.style.color = "#000";
    }
 </script>

<a href="#" id="links" style="color:#fff">Hello</a>
<p align="center">
    <input type="button" onclick="changelinks()" value = "Click this if you can't see the links!"/>
</p>

这是一个简单的例子，将做你一个链接id="links"。要对同一个类的多个元素做类似的事情，请参阅这个问题和javascript手册。

还要注意的是，这个例子使用的是纯javascript，但是使用JQuery也可以提供一个更简洁的解决方案——详见Johannes N的回答

这可以很容易地使用jQuery完成。

Html: 

<p id="button">Button</p>
<a href="" class="links">link</a>
JavaScript: 

$(function() {
    $('#button').click(function() {
        $('.links').css("color", "red");
    });
});

工作示例:http://jsfiddle.net/YS79d/

在jquery中使用addClass和removeClass

HTML/CSS 

<style>
.links {
color:#FF0000;
}
.links2 {
color:#0000FF;
}
</style>
<p id="button">Button</p>
<a href="" class="links">link</a>
Javascript 

$('#button').toggle(function () {
    $(".links").addClass("links2");
}, function () {
    $(".links").removeClass("links2");
});

工作JSFiddle示例

相关文章：