Skip to main content
L
lhoang55254971
Participant
January 17, 2019
Answered

Hi, I really got a problem that I don't know why my JS doesn't work out???

  • January 17, 2019
  • 1 reply
  • 346 views

I try to create the change image on click in my HTML but this site doesn't run my function. Can someone help me find the mistake in my javascript function or css or HTML. I really don't know what problem with this and I really really hope to fix. Below are my HTML source, CSS, Javascript code. Thank you so much for your help

//This is HTML

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>jQuery1</title>

<link rel="stylesheet" type="text/css" href="CSS for jQuery(1).css"/>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="JS for jQuery(1).js"></script>

</head>

<body>

  <div id="btbChangeImage">Change Image</div>

  <img id="my_image" src="html example/Support source/he-mat-troi.jpg" alt=""/>

</body>

</html>

//This is my CSS

@charset "UTF-8";

#my_image{

  width:800px;

}

#btbChangeImage{

  margin:10px;

  padding:10px;

  width:80px;

  text-align:center;

  border:1px solid black;

  cursor:pointer;

}

//This is my JS code

jQuery(document).ready(function($){

  var btb=document.getElementByID('btbChangeImage');

  btb.onclick= ChangeImage;

});

var CurrentImage=0;

function ChangeImage(){

  if(CurrentImage===0){

  $('#my_image').attr("src","html example/Support source/he-mat-troi.jpg");

  CurrentImage=1;

  }else{

  $('#my_image').attr("src","html example/Support source/xu-ly-mau.jpg");

  CurrentImage=0;

  }

}

This topic has been closed for replies.
Correct answer osgood_

You dont need JQuery to do what you want. Just use the vanilla javascript <script> </script> code below and paste it directly before the closing </body> tag of your page.

Also I would advise that you DONT use spaces in file or folder names. I would use something like below (an underscore) and stick to lower case letters:

html_example/support_source/he-mat-troi.jpg

html_example/support_source/xu-ly-mau.jpg

<script>

var btb=document.querySelector('#btbChangeImage');

btb.addEventListener('click', ChangeImage);

var CurrentImage = 0;

function ChangeImage(){

if(CurrentImage===0){

document.querySelector("#my_image").src = "html example/Support source/he-mat-troi.jpg";

CurrentImage=1;

} else{

document.querySelector("#my_image").src = "html example/Support source/xu-ly-mau.jpg";

CurrentImage=0;

}

}

</script>

1 reply

O
osgood_Correct answer
Legend
January 17, 2019

You dont need JQuery to do what you want. Just use the vanilla javascript <script> </script> code below and paste it directly before the closing </body> tag of your page.

Also I would advise that you DONT use spaces in file or folder names. I would use something like below (an underscore) and stick to lower case letters:

html_example/support_source/he-mat-troi.jpg

html_example/support_source/xu-ly-mau.jpg

<script>

var btb=document.querySelector('#btbChangeImage');

btb.addEventListener('click', ChangeImage);

var CurrentImage = 0;

function ChangeImage(){

if(CurrentImage===0){

document.querySelector("#my_image").src = "html example/Support source/he-mat-troi.jpg";

CurrentImage=1;

} else{

document.querySelector("#my_image").src = "html example/Support source/xu-ly-mau.jpg";

CurrentImage=0;

}

}

</script>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices