0

So I have a red circle in my html called redq and whenever I click on it, it should change the picture to same picture but in red, I prepared this in Photoshop so all I need to do is change the source. But I can't seem to get it working.

The console in Chrome says "Uncaught TypeError: Cannot set property 'src' of null"

let red = document.getElementById('redq');

const editRed = () => {
  let img = document.getElementById('picture');
  red.onclick = img.src = 'https://via.placeholder.com/125';
}
editRed();
<header>
  <h1 class="header__title">Customize your laptop case</h1>
</header>

<div class="container">

  <article class="hoesje">
    <h2 class="hidden">Display Picture</h2>
    <img id="picture" src="https://placekitten.com/125/125" alt="Laptop case">
  </article>

  <article class="colorselect">
    <h2 class="hidden">Choose a color</h2>

    <div id="redq" class="circle"></div>
  </article>
</div>
Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
PrettyPotatu
  • 11
  • 2
  • If img is null, you have a problem with document.getElementById('picture'); Can you provide HTML code ? – Bertrand Nov 29 '18 at 23:57
  • Make sure this code executes after the DOM has been parsed. Do that by placing your `script` just before the closing `body` tag. Of course, that's just a guess. We always want you to post ALL your relevant code. In this case, we need to see your HTML as well and where in that HTML you have the JavaScript. – Scott Marcus Nov 29 '18 at 23:58
  • @ScottMarcus Okay, I added the HTML, and placed my script at the bottom but still having the same issue. – PrettyPotatu Nov 30 '18 at 00:11
  • @PrettyPotatu — I converted your code into a live demo. The problem you describe does not occur. – Quentin Nov 30 '18 at 08:11

0 Answers0