JSFiddle - React, Tailwind, and code Playground

by Phil Button

HTML

<div>
  <img id="lessonScore" class="score" src="https://101drums.com/test2/scores/66_12-8.jpg" onclick="changeScore()">
</div>

CSS

.score {
  width: 100%;
}

JavaScript

var lesson = document.getElementById("lessonScore");

function changeScore() {
  var pathStr = lesson.src;
  var rhythmTest = pathStr.includes("rhythm");
  if (rhythmTest === true) {
    lesson.src = pathStr.replace("rhythm/", "");
  } else {
    lesson.src = pathStr.replace("scores/", "scores/rhythm/");
  }
}