-3

I am trying to get this button to disappear when it is clicked, however, it does nothing when clicked

HTML

<button id="startButton" onclick="startButton()">
   <img src="Img\MainMenu\button(play).png"> 
</button>

<script type="text/javascript" src="Client\js\placeholder.js"></script>

JavaScript

startButton.onclick = function startButton() { // when start button is clicked
   startButton.style.display = "none";
};
Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
ethan1208
  • 11
  • 1
  • 1
    Please take the [tour] and read [ask]. Also might want to look at the [help center article on how to format code](https://stackoverflow.com/help/formatting). – Heretic Monkey Nov 19 '20 at 16:44
  • Does this answer your question? [Add event handler to HTML element using javascript](https://stackoverflow.com/questions/9800310/add-event-handler-to-html-element-using-javascript) – Heretic Monkey Nov 19 '20 at 16:46

1 Answers1

1

You should learn a bit more about HTML and JavaScript before you start coding. Your code has some fundamental errors.

To reference an element uniquely in JavaScript, you'll need to use document.getElementById:

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

If you need to get access to an element which doesn't have an ID, you can use querySelector() to find the element using any selector.

Source: MDN

<button id="startButton">
   <img src="Img\MainMenu\button(play).png"> 
</button>

<script>
  const $startButton = document.getElementById('startButton')

  $startButton.onclick = () => {
    $startButton.style.display = 'none'
  }
</script>
Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
  • i can see that your answer works here, however when i copy your code verbatim in VS and the button still wont disappear – ethan1208 Nov 19 '20 at 16:55
  • @ethan1208 you are probably not implementing it correctly. Copy and paste my updated HTML into your `.html` file and run – Aryan Beezadhur Nov 19 '20 at 16:58
  • thanks alot works now! still baffled as to why this wasnt working in my js file, as ideally i dont want all my code in the html, but thank you none the less :) – ethan1208 Nov 19 '20 at 17:04
  • May be worth actually *detailing* the errors, lest your first paragraph may be seen as condescension. I'm sure that wasn't your intent but it comes across a little like that. For example (and I freely admit I don't know enough JS to know this to be the case so feel free to educate me), you could say "there is no automatic association between the button with ID `"startButton"` and the JS `startButton` variable, the latter is simply `undefined`. Here's some code that explicitly associates a variable with an ID:". – paxdiablo Jul 03 '21 at 01:58
  • @paxdiablo I didn't mean to sound condescending. Whilst your explanation, is true, it sounds rather technical for a beginner, and my answer help the OP anyhow. – Aryan Beezadhur Jul 04 '21 at 15:49
  • No problems, Aryan, I wasn't proposing that actual text, it was just meant to be an example of something you *could* say. I'd expect you to put it in your own words even if it *was* correct. – paxdiablo Jul 04 '21 at 22:08