Javascript背景改变颜色

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

看起来您正试图以两种方式实现click事件：

作为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

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

尝试这个：

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 个解决方案

解决方案1
4 已采纳 2015-04-16 16:59:32

解决方案2
2 2015-04-16 16:56:05

解决方案3
2 2015-04-16 16:58:16

解决方案4
1 2015-04-16 16:57:16

解决方案5
1 2015-04-16 16:57:19

解决方案6
1 2015-04-16 16:58:07

解决方案7
1 2015-04-16 16:58:56

Javascript背景改变颜色

问题描述

7 个解决方案

解决方案1 4 已采纳 2015-04-16 16:59:32

解决方案2 2 2015-04-16 16:56:05

解决方案3 2 2015-04-16 16:58:16

解决方案4 1 2015-04-16 16:57:16

解决方案5 1 2015-04-16 16:57:19

解决方案6 1 2015-04-16 16:58:07

解决方案7 1 2015-04-16 16:58:56

解决方案1
4 已采纳 2015-04-16 16:59:32

解决方案2
2 2015-04-16 16:56:05

解决方案3
2 2015-04-16 16:58:16

解决方案4
1 2015-04-16 16:57:16

解决方案5
1 2015-04-16 16:57:19

解决方案6
1 2015-04-16 16:58:07

解决方案7
1 2015-04-16 16:58:56