Question

我正在尝试自己学习Javascript。所以我给了自己一个任务：创建一个按钮，用那个按钮我可以改变背景颜色。这就是我到目前为止所做的。我假设我不需要在localhost下运行它，就像我们通常使用PHP一样？我只将文件拖到谷歌浏览器。到目前为止，点击后，它根本不会改变颜色。我也想知道为什么。如果有人可以指出我的错误

，将不胜感激

exe1.html

<html>
    <head>
    <link rel="stylesheet" href="layout.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $('.button').click(function(){
        $('body').css('background', '#' + changeColour());
});
});
        function changeColour() {
            return Math.floor(Math.random()*16777215).toString(16);
        }
    </script>
</head>
<body>
    <div class="buttonClickMe">
    <button type="button" onclick="changeColour">Click me</button>
    </div>
</body>

layout.css中

button
 {
  background-color: red;
  width: 100px;
  height: 100px;
 }

body
 {
  text-align: center;
  background-color: blue;
 }

Answer 1

看起来您正尝试以两种方式实现点击事件：

作为HTML属性

<button type="button" onclick="changeColour">

为了使这种方式起作用，您应该使用changeColour作为函数：

<button type="button" onclick="changeColour()">

通过JS

$('.button').click(function(){ ...

这是button的错误选择器（.按类名查找元素）。相反，请使用button：

$('button').click(function(){ ...

任何一种方法都可以使用，你只需要一种方法。

Answer 2

这应该有效

 $(document).ready(function () {
                        $('.button').click(function () {
                            changeColour();
                        });
 });

function changeColour() {
                var col =  Math.floor(Math.random() * 16777215).toString(16);
                $('body').css('background', '#' + col);
}

Answer 3

如果您正在学习javascript，请不要快速跳转到jQuery，首先要使用普通的javascript，就像这样。

纯JS

var array = ['black','red','yellow']; //create an array with colors

function changes(){ //create the function
    document.bgColor= array[Math.floor(Math.random()* array.length)]; //change the document. for example
}

<强> HTML

 <button type="button" onclick="change()">Click me</button>

Answer 4

您用于点击事件的选择器不存在。在按钮中添加一个类以使其正常工作。

试试这个：

<强> HTML

<button type="button" class="button">Click me</button>

<强> CSS

$(document).ready(function(){
    $('.button').on('click', function(){
        $('body').css('background', '#' + changeColour());
    });
});

function changeColour() {
    return Math.floor(Math.random()*16777215).toString(16);
}

Answer 5

$('.button').click(function(){...

指的是点击带有CLASS按钮的按钮。

只需将class=""button"添加到您的按钮即可，但我建议您使用id="myId"并使用$('#myId').click(function(){代替。

Answer 6

你做得很好，

您应该将按钮类.button移动到实际的按钮元素上并删除onclick，然后才能正常工作。

下面： http://jsfiddle.net/745ex5zc/

Answer 7

尝试一下...... JSFiddle https://jsfiddle.net/w6tjtaqy/

<script>
 $(document).ready(function(){
    $('.button').click(function(){
    $('body').css('background', '#' + changeColour());
  });
});
function changeColour() {
     return Math.floor(Math.random()*16777215).toString(16);
}
</script>

<style>
button
 {
  background-color: red;
  width: 100px;
  height: 100px;
 }

body
 {
  text-align: center;
  background-color: blue;
 }
</style>
<div class="buttonClickMe">
    <button type="button" class="button">Click me</button>
</div>

Javascript背景改变颜色

7 个答案: