My HTML button is not working, or it wont call my javascript function

Question

I am new to coding, and i am trying to make a game in javascript. I don't know why my HTML button is not calling my javascript function. I have tried moving the button to the bottom of the code, I have tried it with different functions, I have looked on some reference sites and i can't figure out why it is not working. Here is my button:

let waveActive = false;
let waveNumber = 0;
let enemyCount = 4;
let enemyAmount = 0;
let enemyHealth = 30;

function newWave() {
  enemyCount + 25 %
    Math.floor(enemyCount);
  enemyHealth + 10 %
    Math.floor(enemyHealth);
}

function startWave() {
  waveNumber + 1;
  waveActive = true;
  newWave()
  class enemySpawn {
    main(Stringargs) {
      int(i = enemyAmount)
      while (i < enemyCount) {
        Enemy = new component(30, 30, "purple", 10, 120);
        enemyAmount + 1;
      }
    }
    enemyAmount = 0;
  }
}

<div name="buttonDiv">
  <button type="button" id="startRoundBtn" onclick=startWave();>Start Round</button>
</div>

??? `onclick=startWave();` needs quotes around the function. `enemyCount + 25%` what is that supposed to be? What part isn't working? Have you put `console.log()` statements around to determine which line is breaking? — Kinglish, Jan 28 '22 at 17:54
@Kinglish — *onclick=startWave(); needs quotes around the function* — No, quotes are optional there. — Quentin, Jan 28 '22 at 17:56
I've no idea what you expect that code to do. Nothing you have looks like it is supposed to output anything anywhere. — Quentin, Jan 28 '22 at 17:56
This isn't a big problem, but for your container div, I suggest you give it an id instead of a name attribute because those are typically used for forms. See the [difference between the id attribute and the name attribute](https://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html). — unrealapex, Jan 28 '22 at 18:12
`enemyAmount + 1;` and `waveNumber + 1;` do nothing. Not sure what `int()` is supposed to be. Not sure how the code would ever get out of the while block — epascarello, Jan 28 '22 at 18:17

Steven Spungin · Answer 1 · 2022-01-28T18:14:14.393

1

Try to increment your wave number. waveNumber + 1 will not change the property.

waveNumber += 1;

Here too (along with other places):

function newWave() {
  enemyCount = enemyCount + 25 %
    Math.floor(enemyCount);
  enemyHealth = enemyHealth + 10 %
    Math.floor(enemyHealth);
}

The other issue is your class definition inside your click handler.

You probably do not need the main function. It seems you want something more like this

class EnemySpawn {
  constructor(...args) {
     // do stuff here
  }
}

enemyAmount = 0;  // not sure if you even want to reset this...

while (enemyAmount < enemyCount) {
 const enemy = new EnemySpawn(30, 30, "purple", 10, 120);
 enemyAmount += 1;
}

edited Jan 28 '22 at 18:14

answered Jan 28 '22 at 17:56

Steven Spungin

27,002
5
88
78

That's the least of the problems with this code, and won't make a difference since nothing else ever reads that value. – Quentin Jan 28 '22 at 17:58
@Quentin It's certain a issue that can be corrected. – Steven Spungin Jan 28 '22 at 17:59
Answers are supposed to completely answer the question though. [Not all questions can or should be answered here.](https://stackoverflow.com/help/how-to-answer) – Quentin Jan 28 '22 at 18:00

score -1 · Answer 2 · edited Jan 29 '22 at 05:13

Try it in Script tag in html it should work. Below code is working for me :)

<div name="buttonDiv">
  <button type="button" id="startRoundBtn" onclick="startWave();">
    Start Round
  </button>
</div>

<script>
    let waveActive = false;
let waveNumber = 0;
let enemyCount = 4;
let enemyAmount = 0;
let enemyHealth = 30;
function newWave() {
enemyCount + 25%
Math.floor(enemyCount);
enemyHealth + 10%
Math.floor(enemyHealth);
}
function startWave() {
  waveNumber + 1;
  waveActive = true;
  newWave()
  class enemySpawn {
     main(Stringargs) {
        int(i = enemyAmount)
        while (i < enemyCount) {
            Enemy = new component(30, 30, "purple", 10, 120);
            enemyAmount + 1;
       }
    }
    enemyAmount = 0;
  }
}
</script>

When I click the button, nothing happens. How is that "working"? — Quentin, Jan 29 '22 at 08:48

My HTML button is not working, or it wont call my javascript function

2 Answers2