How to set a button for changing color?

Question

I am new to js and here I have a function changeColor() that I want to change the color of an image when a button is clicked, but it seems the function is not defined. Someone help?

Here is just a simple button in html, and I want to change img's color by clicking button:

<script src="{% static 'js/color_change.js' %}" type="text/javascript"></script>

<div class="container">
  <div id="colorpicker"></div>
  <img src="../media/colortest2.png" id="mug" width="5000" height="5000"
       onload="getPixels(this)"/>

  <button name="color" value="#33FFBD" type="button" onclick="changeColor();">
    Change
  </button>
</div>

My js file, I want to get the value of the button and change to specified color for the img:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;

function getPixels(img) {
    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
    originalPixels = ctx.getImageData(0, 0, img.width, img.height);
    currentPixels = ctx.getImageData(0, 0, img.width, img.height);

    img.onload = null;
}
function hexToRGB(hex)
{
var long = parseInt(hex.replace(/^#/, ""), 16);
return {
    R: (long >>> 16) & 0xff,
    G: (long >>> 8) & 0xff,
    B: long & 0xff
 };
}
Object.onclick = function changeColor()
{
    var mug = document.getElementById("mug");
    if(!originalPixels) return; // Check if image has loaded
    var newColor = hexToRGB(document.getElementByName("color").value);

    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
    {
        if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
        {
            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
        }
    }

    ctx.putImageData(currentPixels, 0, 0);
    mug.src = canvas.toDataURL("image/png");
}

What error are you getting? And what's the purpose of giving `Object` the `onclick` function? — Bucket, May 28 '20 at 15:08
Does this answer your question? [Change onclick action with a Javascript function](https://stackoverflow.com/questions/5303899/change-onclick-action-with-a-javascript-function) — Jsowa, May 28 '20 at 15:37

score 0 · Answer 1 · answered May 28 '20 at 15:11

0

Your function changeColor() can't be found because it was not declared.

You have this:

Object.onclick = function changeColor() {...}

Change that to a function declaration that can be found globally:

function changeColor() {...}

answered May 28 '20 at 15:11

terrymorse

6,771
1
21
27

score 0 · Accepted Answer · answered May 28 '20 at 15:18

0

Change

var newColor = hexToRGB(document.getElementByName("color").value);

To

var newColor = hexToRGB(document.getElementById("color").value);

answered May 28 '20 at 15:18

morrisng

127
7

Can I use getElementByName to change the color? – Hugo Yu May 28 '20 at 15:42
It shown error:color_change.js:21 Uncaught TypeError: Cannot read property 'replace' of undefined – Hugo Yu May 28 '20 at 16:52

How to set a button for changing color?

2 Answers2