Jump to content
Please Use CODE Tags

Why doesn't this work (new to javascript)

Instillingererno
 Share
Go to solution Solved by Instillingererno,
2 minutes ago, Minibois said:

Can you put something like "alert("It should work);" inside the if statement? If that comes up on your screen when you press the button, you know the problem lies within the text changing part. If not, it doesn't even go into that if statement.

 

3 minutes ago, Mr_KoKa said:

change  


Boolean Tekst = false;

to 


var Tekst = false;

Working example: https://jsfiddle.net/wtx5usz7/ 

<html>
<head>
    <title>Eksempel_2</title>
    <meta charset="utf-8" />
    <script>
        var Tekst = false;
        function btnUtfor_onclick()
        {
            if (Tekst == false) {
                document.getElementById("pMelding").innerText = "DerpDerp";
            }
            else {
                document.getElementById("pMelding").innerText = "";
            }
            Tekst = !Tekst;
        }
    </script>
</head>
<body>
    <input id="btnUtfor" type="button" value="Trykk meg" onclick="btnUtfor_onclick()" />
    <p id="pMelding"></p>
</body>    
</html>

Now it works, seems there was something with the boolean? Thank you! 

Posted 
<html>
<head>
    <title>Eksempel_2</title>
    <meta charset="utf-8" />
    <script>
        function btnUtfor_onclick_tekst()
        {
            document.getElementById("pMelding").innerHTML = "DerpDerp";
            document.getElementById("btnUtfor").onclick = "btnUtfor_onclick_blank()";
        }
        function btnUtfor_onclick_blank()
        {
            document.getElementById("pMelding").innerHTML = "...";
            document.getElementById("btnUtfor").onclick = "btnUtfor_onclick_tekst()";
        }
    </script>
</head>
<body>
    <input id="btnUtfor" type="button" value="Trykk meg" onclick="btnUtfor_onclick_tekst()" />
    <p id="pMelding"></p>
</body>    
</html>

 

can someone please explain why this doesn't work and how to fix it, I'm very (very) new to javascript and coding in general

CPU: Intel i7-4770K Motherboard: MSI Z87-G43 RAM: Corsair Vengeance Pro DDR3 1866MHZ 16GB GPU: Gigabyte Geforece 780Ti 3GB "GHz Edition" Case: Corsair 760T "Black" Storage: Mostly SSDs PSU: Corsair RM750 750W 80 plus gold Fully modular Displays: Samsung S24C750 Cooling: NZXT Kraken X60 280mm AIO Keyboard: Razer Blackwidow 2013 Cherry MX Blue Mouse: Logitech G700 Sound: Sound Blaster Recon3D Omega Wireless (Dat name though) 
Link to comment
https://linustechtips.com/topic/647842-why-doesnt-this-work-new-to-javascript/
Share on other sites
Link to post
Share on other sites
Posted

Change 'innerHTML' to 'innerText'

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to post
Share on other sites
Posted
  • Author
2 minutes ago, Minibois said:

Change 'innerHTML' to 'innerText'

Still dont work, I want the button to toggle the text

CPU: Intel i7-4770K Motherboard: MSI Z87-G43 RAM: Corsair Vengeance Pro DDR3 1866MHZ 16GB GPU: Gigabyte Geforece 780Ti 3GB "GHz Edition" Case: Corsair 760T "Black" Storage: Mostly SSDs PSU: Corsair RM750 750W 80 plus gold Fully modular Displays: Samsung S24C750 Cooling: NZXT Kraken X60 280mm AIO Keyboard: Razer Blackwidow 2013 Cherry MX Blue Mouse: Logitech G700 Sound: Sound Blaster Recon3D Omega Wireless (Dat name though) 
Link to post
Share on other sites
Posted
8 minutes ago, Instillingererno said:

Still dont work, I want the button to toggle the text

I would recommend a different system than what you are using now.

Just have the onclick in the html to be the function and empty the text or fill it according to a boolean that you have. Something like this: 

//the function
//check if the boolean is true
if (TheBoolean)
{
  //fill the text
  document.getElementById("pMelding").innerText = "DerpDerp";
}
else
{
  //empty the text
  document.getElementById("pMelding").innerText = "...";
}
//change the boolean's value to the opposite
TheBoolean = !TheBoolean;

 

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to post
Share on other sites
Posted

The reason why it wasn't work is "btnUtfor_onclick_blank()" is not a function but a string.

 

html of 

<input id="btnUtfor" type="button" value="Trykk meg" onclick="btnUtfor_onclick_tekst()" />

is kind of equal to js: 

document.getElementById("btnUtfor").onclick = function(){
    btnUtfor_onclick_tekst()
}

so setting onclick to "btnUtfor_onclick_blank()" won't work, as it expects function, what would work is 

document.getElementById("btnUtfor").onclick = btnUtfor_onclick_blank;

as btnUtfor_onclick_blank is name of a function. ("Missing" of brackets at the end is intentional, as you don't want to call function, just pass the name).

 

But @Minibois pointed you the right approach to accomplish the task. But binding function may come handy anyway and I just wanted to explain what was wrong with your code.

Link to post
Share on other sites
Posted
  • Author
38 minutes ago, Minibois said:

I would recommend a different system than what you are using now.

Just have the onclick in the html to be the function and empty the text or fill it according to a boolean that you have. Something like this: 


//the function
//check if the boolean is true
if (TheBoolean)
{
  //fill the text
  document.getElementById("pMelding").innerText = "DerpDerp";
}
else
{
  //empty the text
  document.getElementById("pMelding").innerText = "...";
}
//change the boolean's value to the opposite
TheBoolean = !TheBoolean;

  

<html>
<head>
    <title>Eksempel_2</title>
    <meta charset="utf-8" />
    <script>
        Boolean Tekst = false;
        function btnUtfor_onclick()
        {
            if Tekst = false {
                document.getElementById("pMelding").innerText = "DerpDerp";
            }
            else {
                document.getElementById("pMelding").innerText = "";
            }
            Tekst = !Tekst;
        }
    </script>
</head>
<body>
    <input id="btnUtfor" type="button" value="Trykk meg" onclick="btnUtfor_onclick()" />
    <p id="pMelding"></p>
</body>    
</html>

Like this?

CPU: Intel i7-4770K Motherboard: MSI Z87-G43 RAM: Corsair Vengeance Pro DDR3 1866MHZ 16GB GPU: Gigabyte Geforece 780Ti 3GB "GHz Edition" Case: Corsair 760T "Black" Storage: Mostly SSDs PSU: Corsair RM750 750W 80 plus gold Fully modular Displays: Samsung S24C750 Cooling: NZXT Kraken X60 280mm AIO Keyboard: Razer Blackwidow 2013 Cherry MX Blue Mouse: Logitech G700 Sound: Sound Blaster Recon3D Omega Wireless (Dat name though) 
Link to post
Share on other sites
Posted
13 minutes ago, Instillingererno said: 

<html>
<head>
    <title>Eksempel_2</title>
    <meta charset="utf-8" />
    <script>
        Boolean Tekst = false;
        function btnUtfor_onclick()
        {
            if Tekst = false {
                document.getElementById("pMelding").innerText = "DerpDerp";
            }
            else {
                document.getElementById("pMelding").innerText = "";
            }
            Tekst = !Tekst;
        }
    </script>
</head>
<body>
    <input id="btnUtfor" type="button" value="Trykk meg" onclick="btnUtfor_onclick()" />
    <p id="pMelding"></p>
</body>    
</html>

Like this?

Change:

"if Tekst = false {"

to:

"if (Tekst = false) {"

and it should work :) 

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to post
Share on other sites
Posted
  • Author
3 minutes ago, Mr_KoKa said:

Your if condition miss brackets and = is assignment operator not equality so it will be always false in this case, the right one will look like this: 


if(Tekst == false){

}

//or

if(!Tekst){

}

 

 

4 minutes ago, Minibois said:

Change:

"if Tekst = false {"

to:

"if (Tekst = false) {"

and it should work :) 

still doesn't work

CPU: Intel i7-4770K Motherboard: MSI Z87-G43 RAM: Corsair Vengeance Pro DDR3 1866MHZ 16GB GPU: Gigabyte Geforece 780Ti 3GB "GHz Edition" Case: Corsair 760T "Black" Storage: Mostly SSDs PSU: Corsair RM750 750W 80 plus gold Fully modular Displays: Samsung S24C750 Cooling: NZXT Kraken X60 280mm AIO Keyboard: Razer Blackwidow 2013 Cherry MX Blue Mouse: Logitech G700 Sound: Sound Blaster Recon3D Omega Wireless (Dat name though) 
Link to post
Share on other sites
Posted

Read my post again, I already told you why it is not working, it is because you using assignment operator = instead of equality operator ==

 

boolean of (variable = false) always will be false. As (variable = true) always will be true, (variable == false) will be true if variable is false. Just use right operator.

Link to post
Share on other sites
Posted
  • Author
Just now, Mr_KoKa said:

Read my post again, I already told you why it is not working, it is because you using assignment operator = instead of equality operator ==

 

boolean of (variable = false) always will be false. As (variable = true) always will be true, (variable == false) will be true if variable is false. Just use right operator.

tried that, didn't work

 

CPU: Intel i7-4770K Motherboard: MSI Z87-G43 RAM: Corsair Vengeance Pro DDR3 1866MHZ 16GB GPU: Gigabyte Geforece 780Ti 3GB "GHz Edition" Case: Corsair 760T "Black" Storage: Mostly SSDs PSU: Corsair RM750 750W 80 plus gold Fully modular Displays: Samsung S24C750 Cooling: NZXT Kraken X60 280mm AIO Keyboard: Razer Blackwidow 2013 Cherry MX Blue Mouse: Logitech G700 Sound: Sound Blaster Recon3D Omega Wireless (Dat name though) 
Link to post
Share on other sites
Posted
8 minutes ago, Instillingererno said:

tried that, didn't work

 

Can you put something like "alert("It should work);" inside the if statement? If that comes up on your screen when you press the button, you know the problem lies within the text changing part. If not, it doesn't even go into that if statement.

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to post
Share on other sites
Posted
  • Author
  • Solution
2 minutes ago, Minibois said:

Can you put something like "alert("It should work);" inside the if statement? If that comes up on your screen when you press the button, you know the problem lies within the text changing part. If not, it doesn't even go into that if statement.

 

3 minutes ago, Mr_KoKa said:

change  


Boolean Tekst = false;

to 


var Tekst = false;

Working example: https://jsfiddle.net/wtx5usz7/ 

<html>
<head>
    <title>Eksempel_2</title>
    <meta charset="utf-8" />
    <script>
        var Tekst = false;
        function btnUtfor_onclick()
        {
            if (Tekst == false) {
                document.getElementById("pMelding").innerText = "DerpDerp";
            }
            else {
                document.getElementById("pMelding").innerText = "";
            }
            Tekst = !Tekst;
        }
    </script>
</head>
<body>
    <input id="btnUtfor" type="button" value="Trykk meg" onclick="btnUtfor_onclick()" />
    <p id="pMelding"></p>
</body>    
</html>

Now it works, seems there was something with the boolean? Thank you! 

CPU: Intel i7-4770K Motherboard: MSI Z87-G43 RAM: Corsair Vengeance Pro DDR3 1866MHZ 16GB GPU: Gigabyte Geforece 780Ti 3GB "GHz Edition" Case: Corsair 760T "Black" Storage: Mostly SSDs PSU: Corsair RM750 750W 80 plus gold Fully modular Displays: Samsung S24C750 Cooling: NZXT Kraken X60 280mm AIO Keyboard: Razer Blackwidow 2013 Cherry MX Blue Mouse: Logitech G700 Sound: Sound Blaster Recon3D Omega Wireless (Dat name though) 
Link to post
Share on other sites
Posted
Just now, Instillingererno said:

  


<html>
<head>
    <title>Eksempel_2</title>
    <meta charset="utf-8" />
    <script>
        var Tekst = false;
        function btnUtfor_onclick()
        {
            if (Tekst == false) {
                document.getElementById("pMelding").innerText = "DerpDerp";
            }
            else {
                document.getElementById("pMelding").innerText = "";
            }
            Tekst = !Tekst;
        }
    </script>
</head>
<body>
    <input id="btnUtfor" type="button" value="Trykk meg" onclick="btnUtfor_onclick()" />
    <p id="pMelding"></p>
</body>    
</html>

Now it works, seems there was something with the boolean? Thank you! 

Yup, there is no type declarations in javascript.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×