Quote generator - Cannot update html on JavaScript button click

I am able to update the HTML using this JavaScript outside the ‘on click’ action, but when I put it inside the ‘on click’ action, it doesn’t work. I know the code is executing the ‘on click’ action, because that’s how I am changing the background color.

Any help would be appreciated!

(Code is executing Test1, Test2, Test3 text, but not Test4 text)

It’s not working 'cause you have an error that is preventing the script execution to reach that part of the code. Check your console!

Edit: Too late. @rmdawson71 beat me to it.

2 Likes

So, for some reason it didn’t like this:

document.body.style.backgroundColor=color; //color is a hex string
document.html.style.backgroundColor=color;

I replaced it with this, and it fixed the error and works the same, but now the function continues on as expected:

$('body').css('background', color);
$('html').css('background', color);

I don’t understand why, but it works…

The first line was fine. It didn’t like it 'cause there’s no such thing as document.html. To target the html element in Javascript it should be document.documentElement.

Aside from that, since you’re giving a 100% height to the body and html, you don’t really need to change the html background-color; doing it to the body will be enough.

Lastly, when using jQuery, if you want to change the same property on different elements, you can group your selectors like:

$('element1, element2, element3 ...').method( // etc );
1 Like
<head>

    <title>

        Regular Expressions

    </title>

</head>

    <script type="text/javascript">

      function validate()

        {

            var username=document.getElementById("uname")

            var regx=/E00/;        //initializing regular expressio type-1

            if(regx.test(usernmae))

            {

                alert("valid");

            }

            else{

                alert("invalid")

                document.getElementById("luser").style.visibility="visible";

            }

        }

    </script>

<body>

    <form>



        <input id="uname" type="text" placeholder="usernamer"/>

        <label id="luser" style="color: red; visibility: hidden;">Invalid User</label><br>



        <button onclick="validate()" type="button">submit</button>

    </form>

</body>   

HI this is my code for me the button click is not working for any sample code that i writing. could you please let me know whether it is a problem with my code or i have to perform any browser settings.