Error setting image src by id in HTML with Javascript

Question

I need to link an image so that when I check or uncheck a box it will appear and disappear. I have nav buttons that dictate which images shall appear. The HTML code is as follows.

function p01Func() {
  document.getElementById("problem").innerHTML = "<p>I'm looking for a type of pancake originating from the Indian subcontinent, made from a fermented batter. It is somewhat similar to a crepe in appearance.</p>";

  document.getElementById("flowchart").setAttribute("src", "images/dosa/dosaDesign.jpg");

  document.getElementById("js").setAttribute("src," "images/dosa/dosa1.jpg");

  document.getElementbyId("another").setAttribute("src," "images/dosa/dosa2.jpg");

  document.getElementById("check1").checked = false;
  document.getElementById("check2").checked = false;
  document.getElementById("check3").checked = false;
}

p01Func();

<div class="column1 design">
  <input id="check1" type="checkbox" /> Design
  <img id="flowchart" src="null" alt="null" />
</div>
<div class="column2 jsSolution">
  <input id="check2" type="checkbox" /> JavaScript Solution
  <img id="js" src="null" alt="null" />
</div>
<div class="column3 otherSolution">
  <input id="check3" type="checkbox" /> Another Solution
  <img id="another" src="null" alt="null" />
</div>

The code won't run anymore, even the other parts. Any advice as to what I'm doing wrong?

Instead of doing it this way. Why don't you just have the image always there but hide it? Surely that would be easier — JamesS
– JamesS, Commented Jan 24, 2019 at 16:08
It's for a course and I was told to do it this way, I know it's a questionable way to go about it. The instructions tell me to write that code and then set the display to none so that I can later write check functions to display the image. — John John
– John John, Commented Jan 24, 2019 at 16:14
What do you mean 'the code won't run anymore'? What code? The entire solution? — JamesS
– JamesS, Commented Jan 24, 2019 at 16:18

benvc · Accepted Answer · 2019-01-24 16:30:36Z

1

You have syntax errors in 2 of your setAttribute() methods.

The following incorrect syntax (comma inside the double quotes after src):

document.getElementById("js").setAttribute("src," "images/dosa/dosa1.jpg");

Should be replaced with:

document.getElementById("js").setAttribute("src", "images/dosa/dosa1.jpg");

You also made the same syntax error in the line that follows this one. You can check your browser console to find these sorts of errors.

answered Jan 24, 2019 at 16:30

benvc

15.3k4 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John John Over a year ago

Thank you so much, I'm an idiot. Really appreciate it.

Collectives™ on Stack Overflow

Error setting image src by id in HTML with Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related