CODEWITHSUNDEEP
javascripthtml
LeopoldStotch
LeopoldStotch

Reputation: 9

Is there an error in my code or have I simply written it wrong?

I'm making a code where if you press the button after the name it will move to the other list. Pressing a button give me the error: "missing ) after argument list". I can't seem to find anything wrong in the code.

<!DOCTYPE html>
<html>
    <title>Favoritter</title>
    <body>
        <p>Hotell</p>
        <p id="hotellDiv"></p>
        <p>Favoritter</p>
        <p id="favDiv"></p>
    </body>
    <script>
        let hotelliste = ["Norwegian Wild", "Stofjord Hotel", "Norefjell Ski og Spa", "Brikdalsbre Fjellstove", "Gudvangen Fjordtell"];
        let favoritter = [];
        skrivhliste();
        skrivfliste();
        
        function skrivhliste(){
            document.getElementById("hotellDiv").innerHTML = "";
            for (var j = 0; j < hotelliste.length; j++){
                document.getElementById("hotellDiv").innerHTML += hotelliste[j] + "<input type=\"button\" onclick=\"leggTil("+hotelliste[j]+")\"><br>";
            }
        }
        function skrivfliste(){
            document.getElementById("favDiv").innerHTML = "";
            for (var j = 0; j < favoritter.length; j++){
                document.getElementById("favDiv").innerHTML += favoritter[j] + "<input type=\"button\" onclick=\"fjern("+favoritter[j]+")\"><br>";
            }
        }
        
        function leggTil(hotell){
            if (hotelliste.indexOf(hotell) > -1) {
                hotelliste.splice(hotelliste.indexOf(hotell), 1);
            }
            favoritter.push(hotell);
            skrivhliste();
        }
        function fjern(hotell){
            if (favoritter.indexOf(hotell) > -1) {
                favoritter.splice(favoritter.indexOf(hotell), 1);
            }
            hotelliste.push(hotell);
            skrivfliste();
        }
    </script>
</html>

Upvotes: -1

Views: 72

Answers (2)

Harjinder kumar
Harjinder kumar

Reputation: 1

Your code is ok, please make a string into onclick function like below. Pass the value in single quotes into both onclick function.

document.getElementById("favDiv").innerHTML += favoritter[j] + "<input type=\"button\" onclick=\"fjern('"+favoritter[j]+"')\"><br>";

Upvotes: 0

Quentin
Quentin

Reputation: 944544

Look at this:

"<input type=\"button\" onclick=\"fjern("+favoritter[j]+")\">

What string are you going to end up with when you insert the value of favoritter[j]?

 <input type="button" onclick="fjern(Norwegian Wild)">

There you don't have the string "Norwegian Wild", you have the variable Norwegian followed by a space followed by the variable Wild (and neither of those variables exist).

If you are programatically generating JavaScript then you need to generate the quotes that go around strings you generate.

This is hard to do well. Especially when that JS gets embedded in HTML that you are also generating on the fly. You have multiple levels of escape sequences to deal with.

Avoid generating strings like this. Use direct DOM methods instead.

For example:

Once, so it can be reused:

function clickHandler(event) {
    const button = event.currentTarget;
    const hotel = button.dataset.hotel;
    leggTil(hotel);
}

Then inside your loop:

const button = document.createElement('input');
button.type = 'button';
button.value = 'display label';
button.dataset.hotel = hotelliste[j];
button.addEventListener('click', clickHandler);
document.getElementById("hotellDiv").appendChild(button);

Upvotes: 4

Related Questions