0

When I'm using the html element attribute onClick="delete_player(1, test), an error shows up in the console saying Uncaught ReferenceError: test is not defined at HTMLButtonElement.onclick ((index):1). I don't want it to pass the argument as a variable, I want it to be passed in as a string. But whatever I do it passes the argument as a variable. which is why the error says Uncaught ReferenceError: test is not defined.

In the document that the error is referring to, there is just a function. delete_player(1, test). I've tried to pass the argument as a string in javascript, but nothing works.

Here is my code;

var ticket_per_player = 1;

function newPlayer() {
    var new_player_name = document.getElementById('new_player_input_name').value;
    if (new_player_name == "") {
      alert("Du måste skriva in ett namn Maarrcuuss! (trodde du att jag skulle gå på det där)");
    } else {
      document.getElementById('points').innerHTML += '<div class="spelare" id=' + ticket_per_player + '><h3 class="player-top" id="player-name">' + new_player_name + '</h3><button class="player-top" id="delete-player" onClick="delete_player('+ ticket_per_player + ', ' + new_player_name + ')">x</button><h4>Poäng:</h4><input type="number"></div>';
      ticket_per_player++; // HTML       
    }
}

function delete_player(ticket_per_player, player) {
    if (confirm("Är du säker du vill ta bort " + player + "?")) {
      document.getElementById(ticket_per_player).innerHTML = "";        
    } else {
      // Do nothing!
    }
}

btw I hope y'all understand even if there is some Swedish in the code. :)

And none of the threads or articles that mention this error has helped me. That's why I ask this question here.

[Edit]

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mario Maker Counter</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <div class="container">
        <h1 class="title">odenCounter</h1>

        <div class="timer">
            <h2>odenTimer</h2>
        </div>

        <div class="points" id="points">
            <h2>odenPoäng</h2>

            <input type="" name="new_player_input_name" id="new_player_input_name">
            <button id="add-player" onClick="newPlayer()">Lägg till spelare</button>




            <div class="spelare" id="0">
                <h3 class="player-top" id="player-name">SpelareNamn</h3>
                <button class="player-top" id="delete-player" onClick="delete_player('0', 'SpelareNamn')">x</button>
                <h4>Poäng:</h4>
                <input type="number">
            </div>


        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
  • 1
    Be more specific what exactly you are trying to do, show the HTML – Ace Nov 23 '19 at 14:45
  • I added the HTML now. And I'm trying to create two buttons that can add and delete players. –  Nov 23 '19 at 15:22
  • I've found the answers on this article; https://stackoverflow.com/questions/9643311/pass-string-parameter-in-an-onclick-function –  Nov 29 '19 at 20:54

1 Answers1

1

If you are trying to pass a string as arguments, you should use string literal like this:

onclick="delete_player(1, 'Test')"

ylc395
  • 93
  • 1
  • 5