HelpMeOutAlways

Changing Style and Html Content In JavaScript (With Video Tutorial)

December 07, 2019 BY Help Me Our Always 0 Comments

Source Code

<!DOCTYPE html>
<html>
<head>
    <meta charset ="utf-8">
    <title>
      change html content
    </title>
    <style>
      .box{
        background-color: green;
        color: white;
        height: 400px;
        width:400px;
          padding: 100px;
          font-size: 20px
    }


    </style>
</head>

<body>
    <div class="box" id="bluebox">
      <p>
        <p>HelpMeOutAlways is a place for learning JavaScript<p>
          <button id="button1">Change html content</button>
      </p>
        <script>

            document.getElementById("button1").onclick=function(){
               document.getElementById("bluebox").style.width="300px";
                document.getElementById("bluebox").style.fontSize="30px";
                document.getElementById("bluebox").innerHTML="<p>HelpMeOutAlways is a place for learning JavaScript<p>";
                                document.getElementById("bluebox").style.color="white";
                   document.getElementById("bluebox").style.backgroundColor="green";

            }
        </script>

    </div>
    </body>
</html>

Output

Video Tutorial

Reading Time:

JavaScript

Changing Text and html Content Using Button in JavaScript (With video tutorial)

December 07, 2019 BY Help Me Our Always 0 Comments

Changing Text and html Content Using Button in JavaScript

Here you will get the source code for Changing Text and html Content Using Button in JavaScript.

Source Code

<!DOCTYPE html>
<html>
<head>
    <meta charset ="utf-8">
    <title>
      change html content
    </title>
    <style>
      .box{
        background-color: #3A5795;
        color: white;
        height: 400px;
        width:400px;
          padding: 100px;
          font-size: 20px
    }


    </style>
</head>

<body>
    <div class="box" id="bluebox">
      <p>
        hello! how are you?
          <button id="button1">Change html content</button>
      </p>
        <script>
            document.getElementById("button1").onclick=function(){
               document.getElementById("bluebox").innerHTML="<p>HelpMeOutAlways is a place for learning JavaScript<p>"
            }
        </script>

    </div>
    </body>
</html>

Output

Video Tutorial

Changing Text and html Content Using Button in JavaScript is very simple.
Enjoy learning JavaScript!

Reading Time:

JavaScript

Button in JavaScript (showing alert message with video tutorial)

December 07, 2019 BY Help Me Our Always 0 Comments

Button In JavaScript Example

JavaScript Button Example Onclick you will get an alert message, you can try it by saving as an .html file and open in any browser.

Source Code

<!DOCTYPE html>
<html>
    <head>
        <title>alert</title>
    </head>
    <body>
        <p>JavaScript</p>
        <button onclick="alert('Hello! You clicked me!')">Click Me!</button>
        <button id="button2">Click Me!</button>
        <script>
       document.getElementById("button2").onclick=function(){
                window.alert("You have just clicked me!");
}
        </script>
    </body>
</html>