Javascript背景更改颜色答案

【问题标题】：Javascript Background Change ColourJavascript背景更改颜色
【发布时间】：2015-06-23 05:52:37
【问题描述】：

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

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;
 }

【问题讨论】：

您发布的代码不是纯 JavaScript。
介意指出它的哪一部分？我无法真正识别/区分纯 Javascript 和 jQuery，因为我到处参考教程来完成这项工作。我还在学习，希望下次我会变得更好:)
给出一个简单的答案，任何以美元符号开头的行都是 JQuery。

标签： javascript html css colors background

【解决方案1】：

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

作为 HTML 属性

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

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

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

通过 JS

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

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

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

任何一种方法都可以，您只需要一种。

【讨论】：

感谢您指出我的愚蠢错误！非常感谢您提供了不同的方法来实现相同的目标。我一直认为只有一种方法可以做到这一点。 :)

【解决方案2】：

这应该可以工作

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

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

【讨论】：

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

【讨论】：

感谢您指出我没有使用纯 JavaScript。在我的第一个 javascript 教程之后，我感到很困惑 + 对两者之间的区别感到困惑。
jquery 是一个库，可以让我们生活得更轻松，我们的 javascript 代码也更干净，例如 var example = document.getElementById('id').value; 可以使用 jQuery 简化为 $('#id').val()，但就像我说的，如果你正在学习，请先给出一个尝试简单的旧 javascript，以免您了解基本跳转到 jQuery

【解决方案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);
}

【讨论】：

【解决方案5】：

你做的很好，

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

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

【讨论】：