Highlighted

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

New Here ,
Jan 16, 2019

Copy link to clipboard

Copied

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;

  }

}

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>

TOPICS
Learn Dreamweaver

Views

200

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Jan 16, 2019

Copy link to clipboard

Copied

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;

  }

}

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>

TOPICS
Learn Dreamweaver

Views

201

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 16, 2019 0
LEGEND ,
Jan 17, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2019 1