在画布Javascript中更改div的背景颜色

Question

I've got this program where I'm creating a paint software. 我已经在创建绘画软件的地方找到了这个程序。 When i press the ctrl key while moving the mouse, it turns on the eraser. 当我在移动鼠标的同时按ctrl键时，它将打开橡皮擦。 I've got a div element that's a box that's tracking the mouse so the user knows where the mouse is in the canvas. 我有一个div元素，该元素是一个跟踪鼠标的框，以便用户知道鼠标在画布中的位置。

The problem I'm having is that I can't change the colour of the div element to white when it goes to eraser mode. 我遇到的问题是，当进入橡皮擦模式时，无法将div元素的颜色更改为白色。 Here's my code: 这是我的代码：

<!doctype html>
<html lang="en">
    <head> 
    <title>Coursework 1 Template v1.0</title>

    <style>
            #box {
          pointer-events: none;
          background-color: #000000;
          width: 5px;
          height: 5px;
        }
        </style>

    <script>
        var oCanvas, oCanvasContext; //declare the global variables used to hold and control the canvas element
        var sFillColour; //create a global variable used to hold the active/selected colour
        var sCanvasColour; //create a global variable used to hold the canvas colour
        var iMouseX, iMouseY; //declare the global variables used to hold the mouse's coordinates
        var iBrushWidth, iBrushHeight; //declare the global variables used to hold the selected brush sizes
            function fnTrackMouse(e) {
            //this function is called "everytime" the user's mouse is moved when over the associated element (in this case the canvas)
            //we have also added the ability for it to accept a parameter (called e, actually we can call it anything but as event is a reserved work "e" makes some sense
            var canvasRect = oCanvas.getBoundingClientRect(); //use this function to dynamically get the size of the canvas and its position
            iMouseX=(e.clientX - canvasRect.left - 3); //modify the original position of the mouse by accounting for the position on the canvas; on the x
            iMouseY=(e.clientY - canvasRect.top - 3); //modify the original position of the mouse by accounting for the position on the canvas; on the y

            var bx = document.getElementById("box");
            bx.style.left = (iMouseX + 1)+"px";
            bx.style.top = (iMouseY + 1)+"px";
            fnDebugMessage("Working!"+iMouseX)

            if (e.ctrlKey) { //this checks if the user has pressed the control key to use the eraser funtion
                fnSetFillColour(sCanvasColour); //calls the fnSetFillColour function with the background colour of the canvas in the parameter
                bx.style.background-color = #ffffff
            }       


            if (e.buttons==1) { //this checks to see if the user is pressing the left mouse button (1 = the left mouse button)
                //the user has pressed the left button - so lets start painting
                fnPaint(iMouseX, iMouseY, iBrushWidth, iBrushHeight); //call the fnPaint function and pass it the coordinates and size to paint
            }

        </script>

</head>

<!-- 
    this "onload" event fires when the HTML <body> has loaded. In essence, we are telling the browser that once the page 
    has completely loaded all the content to execute a script. 
    in this case the function being called is "fnInitialise" and we are passing it two parameters: 
        the first (work out how this sets the width) = 100 
        the second (work out how this sets the height) = 100 
-->


<body onload="fnInitialise(100, 100);">

    <!-- 
        this div block (HTML page divider) is used to hold the entire interactive painting HTML elements 
        the benefit of putting multiple elements in a single container is that if you set the location of the 
        container each of the elements held by the container will move relative to it; move one, move all 
    -->
    <div id="cw1MainContainer">


        <!-- this div block is only used to hold the HTML canvas element -->
        <div id="cw1CanvasContainer">
            <canvas id="cw1Canvas" onmousemove="fnTrackMouse(event);" onkeypress="fnBrushSize(event);"></canvas>
            <div id="box" style="position:absolute;" />
            <!-- 
                by specifing the onmouseover event the canvas will call the "fnTrackMouse" function EVERY time the 
                mouse moves 1 pixel over the canvas.
                by passing the JavaScript "event" we are effectively also passing details about the event, 
                e.g. where the mouse was, what buttons were pressed etc. 
            -->
        </div>
        </div>      

</body>

It's throwing a Invalid left-hand side in assignment error. 它在分配错误中抛出了无效的左侧。 How do I change the background colour of the div element? 如何更改div元素的背景颜色？ Please let me know if you want to see the rest of my code 如果您想查看其余的代码，请告诉我

Any help would be appreciated. 任何帮助，将不胜感激。 Thanks 谢谢

Answer 1

try to change it from this 尝试从这里改变它

bx.style.background-color = #ffffff

to this 对此

box.style.backgroundColor = "#333333";

so no need to use (-) in the word backgroundColor.. 因此无需在backgroundColor一词中使用（-）。

I wish it helps 希望对您有所帮助

在画布Javascript中更改div的背景颜色

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-03-10 13:21:40

在画布Javascript中更改div的背景颜色

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-03-10 13:21:40

解决方案1
2 已采纳 2019-03-10 13:21:40