1

I can't get the button to clear the text. So the button and text does show when I click on the image, when I click the button it does disappear but the text does not.

<script type="text/javascript">
  function song(animal, sound) {
    document.getElementById("buttonAppear").innerHTML = '<button type="button" onclick="buttonFunction(); clear();">Clear</button>';
    document.getElementById("verse").innerHTML += "<br>Old MacDonald had a farm, E-I-E-I-O.<br>And on that farm he had a " + animal + ", E-I-E-I-O.<br>with a " + sound + "-" + sound + " here and a " + sound + "-" + sound + " there,<br>  here a " + sound + " there a " + sound + " everywhere a " + sound + "-" + sound + ".";
  }

  function clear() {
    document.getElementById("verse").innerHTML = "";
  }

  function buttonFunction() {
    document.getElementById("buttonAppear").innerHTML = "";
  }
</script>
</head>
<main>
  <h1>The Animals Game</h1>

  <img src="cat.jpg" title="Cat" alt="Cat" height="200" width="200" onclick="song('CAT', 'MEOW') ;">
  <img src="cow.jpg" title="Cow" alt="Cow" height="200" width="200" onclick="song('COW', 'MOO') ;">
  <img src="dog.jpg" title="Dog" alt="Dog" height="200" width="200" onclick="song('DOG', 'WOOF') ;">


  <p id="verse"></p>
  <div id="buttonAppear"></div>
braX
  • 11,506
  • 5
  • 20
  • 33
Niko
  • 25
  • 6

2 Answers2

1

It turns out that 'clear' as a global reference is already taken, as a property of the document object.

More info here:

Is "clear" a reserved word in Javascript?

You should change your function name to something else, like clearParagraph()

Community
  • 1
  • 1
kasijus
  • 336
  • 3
  • 14
1

When the onclick handler is called you are not referencing your clear function but rather the document.clear function (Is "clear" a reserved word in Javascript?). Try renaming your function or set click event handlers instead of using the onclick attribute (you can read more here about onclick="" vs event handler, with a similar issue being listed)

Community
  • 1
  • 1
Kristijan
  • 5,827
  • 1
  • 13
  • 21