Can someone help me?

I want to select from a list of images and when anyone of the image is selected/highlighted then if the user clicks on Submit button it should take that user to a url(which will be different for different image),but idk how to do this (know only HTML and CSS)
Can someone help me?
My code:

1 Like

Hello @RyDeR-69, welcome to the GitHub Support Community.

One thing I can think of would be to add a click event to the submit button. Add the following script before the end of the </body> tag.

<script>
// handle click event for #submit
document.getElementById('submit').onclick = function () {
  var img = document.getElementById(window.location.hash.slice(1)); // slice removes the hash
  
  // take user to the image's data-url
  if (img) {
    window.location.href = img.dataset.url;
  }
  
  // alert the user if the image cannot be found or is not selected
  else {
    alert('Please select an image.');
  }
  
  return false; // prevent submit button from updating the page hash
};
</script>

Then add id="submit" to the submit button, doing so should link it to the above script.

As for the links, I’m assuming you’re doing them by hand. So, add data-url="URL" to each image, and replace URL with the URL you want the user taken to for that image.

Now, if done correctly, clicking an image and then the submit button should now take you to the links you specified.

The script, which makes this possible, is called JavaScript and it’s basically what makes your pages more interactive or do more complex things. You should definitely consider learning it, as it’s a powerful part of web development. I’ve linked two good beginner resources for learning below.

3 Likes

thanks you so much <3

@sethclydesdale thanks for answer, but help me another time.
If you have time can You study my code and make when i select google img and press submit to open website google.com and when i select youtube img and press submit to open website youtube.com
(i added your script to my code but if i select a img and press submit it is opening …/undefined) Can you help me one more time?

Hmm… it sounds like you may have forgotten to add the data-url attribute to each image or the value isn’t set correctly. Try the following.

Find:

<img id="a"

and replace it with:

<img id="a" data-url="https://www.google.com/"

Then find:

<img id="b"

and replace it with:

<img id="b" data-url="https://www.youtube.com/"

Save the file and it should now take you to the specified URLs in the data-url attribute.

1 Like

thanks and yeah I’ve been learning html and css for about 1 week :slight_smile: thanks again

1 Like