2
function clear() {
document.getElementById("1").innerHTML = '';
document.getElementById("2").innerHTML = '';
document.getElementById("3").innerHTML = '';
}
<button onclick="clear()">Clear</button>

That is the function and my button that runs it. The purpose of the function is to clear the paragraphs, but the button does nothing when I tested it out.

Why is this function not running when the button is clicked?

EDIT: sorry if the answer is obvious, i'm a beginner to JS EDIT: HTML: 

<p id="1"></p>
<p id="2"></p>
<p id="3"></p>

There is also a JS function that changes the text of the Paragraphs, but it doesn't loop

Tler
  • 154
  • 1
  • 11
  • 3
    Show your HTML. – Barmar Feb 02 '17 at 23:13
  • 2
    @Barmar the HTML I used for the button is under the JS. In my file the html is not actually under the JS – Tler Feb 02 '17 at 23:13
  • 2
    @Tler he's referring to the HTML you are attempting to "clear". – noahnu Feb 02 '17 at 23:14
  • 1
    put `alert('YOOO');` as the first line in your `clear` function and try clicking the button again. Do you see an alert notification appear when you click? – Gershom Maes Feb 02 '17 at 23:15
  • 1
    Are you sure that button isn't submitting your "form" and reloading the page immediately after clearing it? Try to `return false` in the event handler. – Bergi Feb 02 '17 at 23:21

1 Answers1

9

Don't name the function clear as the DOM has an old global method named clear. Try something else like clearMe

function clearMe() {
  document.getElementById("1").innerHTML = '';
  document.getElementById("2").innerHTML = '';
  document.getElementById("3").innerHTML = '';
}
<div id="1">
  foo
</div>
<div id="2">
  foo
</div>
<div id="3">
  foo
</div>
<button onclick="clearMe()">Clear</button>
j08691
  • 204,283
  • 31
  • 260
  • 272