Question

我正在做一个项目，我很难写出代码，当我更改颜色时，我需要使项目中的球更改为与左上角的按钮相同的颜色。我需要他们保持同步。需要牢记的是，这没有jquery纯香草javascript和ecma 5

话虽如此，这里是该项目的说明：

使用Javascript表单事件调整屏幕上圆圈的背景颜色。


分叉此存储库。

**制作一个<form>标记，其中包含<input>-使用type="color"作为输入。

在表单的change事件触发时，调整球的background-color以匹配输入值。

通过Markbot运行它，并确保它通过所有检查。

这是我的项目当前的样子：

当我单击左上角的按钮时，将弹出：

这是我的html：

<!DOCTYPE html>
<html>
<head>
<title>CircleColourr</title>
    <link href="main.css" rel="stylesheet">
</head>

<body>

    <div class="ball"></div>

</body>

    <script src="jquery.min.js"></script>
    <script src="main.js"></script>
</html>

这是我的main.css

html{
    box-sizing: border-box;
}

*, *::before, *::after{
    box-sizing: inherit;
}

.ball{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 200px;
    left: 200px;
    background-color: ;
    border-radius: 100px;
}

这是我的main.js

 var body = document.querySelector('body');
    var h2 = document.createElement('h3');
    var forma = document.createElement('form');
    var inForma = document.createElement('input');

    var h2 = document.createTextNode('Colour');



    inForma.type = 'color';

    inForma.id = 'listen';


    body.appendChild(h2);
    forma.appendChild(inForma);
    body.appendChild(forma);

    var bally = document.querySelector('.ball');

    bally.style.backgroundColor = forma; // first attempt
    console.log(bally.style.backgroundColor = forma);//first attempt

var button = document.getElementById('listen').addEventListener ('click', change);

function change(e){
document.querySelector('.ball').style.backgroundColor = forma;
}

我做了两次尝试，第一次尝试将实际的form元素分配给ball div，第二次似乎什么也没有发生。对我来说，思考的过程是将形式分配给球的backgroundColor。我只需要一些指导即可。

Answer 1

我看到几个问题

这里有一个空间，它将打破它
getElementsById是无效函数，请使用getElementById
用户选择颜色后，当您打开ui（您想使用click侦听器）时，事件侦听器change将触发 var button = document.getElementsById('listen').addEventListener ('click', change);

您没有一个名为class的类的元素，但是您确实有.ball document.querySelector('.class').style.backgroundColor

这是工作版本 https://jsfiddle.net/rp9kxLyu/

将一个元素的颜色值链接到另一个

1 个答案: