javascript style button not functioning

Question

I cannot get my javascript to run. I have added several different options, and removed them, I have had the function in the and now moved it to the . No matter what I try the button does not work. I am trying to learn javascript. It doesn't seem that difficult to learn, but If I can't test it, what is the use? Please help!

<!DOCTYPE HTML> 
<html>
    <head> 
        <meta charset=utf-8 /> 
        <title>Change Paragraph Text</title> 

    </head>  
    <body> 
        <p id ="text">I’m going to change this text, I hope.</p> 

        <button type="button" onclick="js_style()">Click on Me</button> 

        <script>
            function js_style() {
                'use strict';

                //font styles added by JS:
                document.getElementById("text").style.color="purple";
                document.getElementById("text").style.fontSize="18pt";
                document.getElementById("text").style.fontFamily="Comic Sans              MS";

                }
               document.getElementById("text").innerHTML = js_style();
        </script>

    </body> 
</html>

Welcome to Stack Overflow bbzzc! Have you [checked your console?](http://stackoverflow.com/documentation/javascript/185/getting-started-with-javascript/714/using-console-log) It may help you find issues in your code. It also looks like you're calling `js_style` immediately. — Mike Cluck, May 26 '17 at 18:35

score 1 · Answer 1 · answered May 26 '17 at 18:40

1

The code you present throws undefined on the text you want to change. Simply remove

document.getElementById("text").innerHTML = js_style();

and everything should work, I suppose. Here is an example:

https://jsfiddle.net/nmLrpvhy/

answered May 26 '17 at 18:40

Vasil Indzhev

635
1
7
17

Scott Marcus · Answer 2 · 2017-05-26T18:51:34.270

The issue is that you have this line:

document.getElementById("text").innerHTML = js_style();

running automatically (because it's outside of your function) and changing the text immediately, so clicking the button does work, but it's just setting the same styles that were already set.

Additionally, innerHTML is for setting the "content" of an element, not its style. In your case, that line attempts to set the return value from the js_style function as the value for the innerHTML. But, the function doesn't return a value - - it only concerns itself with modifying styles.

Don't use inline HTML event attributes (onclick, etc.). See here for why. Instead, do all your work in JavaScript.

<!DOCTYPE HTML> 
<html>
    <head> 
        <meta charset=utf-8 /> 
        <title>Change Paragraph Text</title> 

    </head>  
    <body> 
        <p id ="text">I’m going to change this text, I hope.</p> 

        <button type="button">Click on Me</button> 

        <script>
            // get a reference to the button
            var btn = document.querySelector("[type='button']");
            
            // set up the click event handler
            btn.addEventListener("click", js_style);
        
            function js_style() {
                //font styles added by JS:
                document.getElementById("text").style.color="purple";
                document.getElementById("text").style.fontSize="18pt";
                document.getElementById("text").style.fontFamily="Comic Sans              MS";
            }

        </script>

    </body> 
</html>

Umair Gul · Answer 3 · 2017-05-26T18:54:42.300

0

here is the solution of your code: the line in which you were trying to get your changed text was actually outside the scope of the 'js_style' function that why nothing was happening when you clink on button.

<!DOCTYPE HTML>
<html>

<head>
<meta charset=utf-8 />
<title>Change Paragraph Text</title>

</head>

<body>
<p id="text">I’m going to change this text, I hope.</p>

<button type="button" onclick="js_style()">Click on Me</button>

<script>
    function js_style() {


        //font styles added by JS:
        document.getElementById("text").style.color = "purple";
        document.getElementById("text").style.fontSize = "18pt";
        document.getElementById("text").style.fontFamily = "Comic Sans MS";
        document.getElementById("text").innerHTML = "Changed Text"; /* this 
        line should be here if you want to change the text of #text in you 
        html */
    }
        /* you were written this line here which out of the scope of 
        function */
</script>

</body>

</html>

edited May 26 '17 at 18:54

answered May 26 '17 at 18:45

Umair Gul

352
1
4
15

You should post an explanation of the problem and your solution. – Scott Marcus May 26 '17 at 18:46
yo were writing this line outside the function `document.getElementById("text").innerHTML = "Changed Text";` – Umair Gul May 26 '17 at 18:47
1

No, in your answer. You should go back and edit your answer to fully explain the issue and your solution. Also, your explanation doesn't really explain why the code wasn't working, it only points out where the problem was. Lastly, you changed the OPs code to something he never actually had. – Scott Marcus May 26 '17 at 18:48

Trent · Answer 4 · 2017-05-26T18:36:41.520

-1

Can you try:

<script type="text/javascript">

instead of just

 <script>

?

edited May 26 '17 at 18:36

answered May 26 '17 at 18:35

Trent

9
2

This should be a comment and it doesn't make any difference. In fact, people often advise *against* adding `type="text/javascript"` – Mike Cluck May 26 '17 at 18:36
1

Why? In HTML5, the default `type` is `text/javascript` and most browsers processed it that way for years before HTML5. – Scott Marcus May 26 '17 at 18:38

nicokant · Answer 5 · 2017-05-26T18:39:24.163

-1

try with onclick="js_style">:

<!DOCTYPE HTML> 
<html>
    <head> 
        <meta charset=utf-8 /> 
        <title>Change Paragraph Text</title> 

    </head>  
    <body> 
        <p id ="text">I’m going to change this text, I hope.</p> 

        <button type="button" onclick="js_style">Click on Me</button> 

        <script>
            function js_style() {
                'use strict';

                //font styles added by JS:
                document.getElementById("text").style.color="purple";
                document.getElementById("text").style.fontSize="18pt";
                document.getElementById("text").style.fontFamily="Comic Sans MS";

                }
               document.getElementById("text").innerHTML = js_style();
        </script>

    </body> 
</html>

edited May 26 '17 at 18:39

answered May 26 '17 at 18:37

nicokant

483
4
12

Please test your code before posting. This has the exact same effect as before. – Mike Cluck May 26 '17 at 18:38
please specify there you made the changes in your answer – Charlie Ng May 26 '17 at 18:38
added to the top of the answer, I don't know how to highlight it inside code – nicokant May 26 '17 at 18:41

javascript style button not functioning

5 Answers5