Javascript 背景改变颜色

Question

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

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

这应该有效

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

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

Answer 2

您为点击事件使用的选择器不存在。添加一个 class 到按钮它不起作用。

试试这个：

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 3

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

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

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

Answer 4

你做的很好，

您应该将按钮 class .button 移动到实际的按钮元素上并删除 onclick 然后应该可以工作。

这里： http://jsfiddle.net/745ex5zc/

Answer 5

如果你正在学习 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 6

试一试... 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>

Answer 7

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

作为 HTML 属性

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

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

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

通过 JS

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

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

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

两种方法都行，您只需要一种方法。

Javascript 背景改变颜色

Javascript Background Change Colour

html

javascript

css

background

colors