Hi, first timer.
i am learning JS as part of my degree and I know next to nothing.
it’s basic and I dont use jquery/angular/etc… its definetly not my field of expertise or likeness, but I have to know the basics atleast.
I would appriciate it very much if you would give me some insight on these basic excercises:
build an INPUT TYPE COLOR button that when clicked on, changes it’s background color to the one selected by the user
my html:
<input type="color" id="button" >
<input type="button" value="click here to change color" id="btn" onclick="changecolor(btn)">
<script src="js/script.js"></script>
my js:
"use strict";
function changecolor(elementId) {
let btncolor = document.getElementById(button).getAttribute("color");
let clr = document.getElementById(elementId).style.backgroundColor=btncolor;
}
2)add an image that when clicked on changed to a random image(add atleast 4 images).
*this I havnt started as im struggling hard with the first excercise. although I assume it deals with an array of images and randomizing array[place].
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
Please use the “preformatted text” tool in the editor (</>) to add backticks around text.
So it is easier to help if you have a live version –
– go to https://repl.it/
– sign up
– use the button at the top right (+ new repl) to creat a new repl, and pick “HTML,CSS, JS” from the dropdown.
I’m using Replit rather than anything else because it should give you exactly the same structure you have on your computer (and HTML file and a JS file – ignore the CSS for now)
What you’re stuck on is pretty trivial, but it’ll likely be more useful to provide help with immediate feedback
The description is very confusing, but as far as I can see, it is asking you to change the background colour of the colour input. Although it says button, it isn’t actually asking you to define a button.
When you attach an event listener, that function takes a parameter that represents the event that occured – this is an object with a load of useful information. You don’t need to use getElementById here because the event itself will have a reference to the thing the event occurred on – it’s stored as the target property.
function changecolor(event /* this is the object that gets populated. when the input is clicked */) {
// THIS IS THE ELEMENT THAT CAUSED THE EVENT:
console.log(event.target)
// THIS IS THE VALUE OF THE INPUT AFTER THE CLICK:
console.log(event.target.value)
}
Secondly, and maybe counterintuitively, the click event will not work as you expect. If you attach the function to to onclick, and you wire it up properly, what will happen is that the background colour will only visibly change the next time you click:
Initially, there is no value, so…
Click on the input – this is when the event occurs, and the value is currently not defined
This sets the background colour to undefined
The colour picker opens
Pick a colour (say green) from the colour picker and close the picker
So the background colour has not visually changed, even though you’ve picked a colour. So:
Click on the input – this is when the event occurs, and the value is whatever was just picked in the last steps (green)
Background colour changes to green
The colour picker opens
Pick the colour from the colour picker (say blue) and close the picker
…And the background colour is still green, you need to click it again to make it change to blue. And so on.
To have it change when the colour is picked, you need to use eitheroninput or onchange (instead of onclick) to listen to the input or change events respectively:
input will make the background change whenever anything changes in the input (this is the best in terms of visual feedback for the user) .
change will make the background change when the user closes the colour picker.
Either of these are more relevant to the problem that the click event.
Lastly, you should really be attaching the listeners in the JavaScript, using addEventListener rather than using the inline on{eventname} attributes in the HTML, but can look at that after you get something working.