HELP needed badly in JS

#1

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:

  1. 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].

thank you!

#2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

#3

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

#4

Use this code

  • to change button color on-click:

HTML

<input type="color" id="button" >
<input type="button" value="click here to change color"  id="btn" onclick="changecolor(btn)" style="background: orange; padding: 10px 20px;" /> 
  <script src="js/script.js"></script>

js code

function changecolor(btnId){
     document.getElementById("btnId").style.backgroundcolor = 
      document.getElementById("button").value;
}

I’m sorry I didn’t understand the image part can you be more specific what you want to do. Do you want to do change images on button click?

#5

This isn’t what OP is being tasked with – note the input type

take value from colour input -> apply that value to the button

OP is already basically using the code you’ve posted there, the impression I get is that they understand how to apply a background colour style

With the image, there will an image in the HTML. When clicked on, it changes to another random image.

1 Like
#6

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:

  1. Initially, there is no value, so…
  2. Click on the input – this is when the event occurs, and the value is currently not defined
  3. This sets the background colour to undefined
  4. The colour picker opens
  5. 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:

  1. Click on the input – this is when the event occurs, and the value is whatever was just picked in the last steps (green)
  2. Background colour changes to green
  3. The colour picker opens
  4. 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 either oninput 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.