Online JavaScript Compiler (Editor)

JavaScript Online Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Sample HTML Page</title>
       
    <style>
    /* CSS styles can be included here */
        body{
         font-family: Arial, sans-serif;
         background-color: #f0f0f0;
         margin: 0;
         padding: 0;
        }

header{
         background-color: #333;
         color: #fff;
         padding: 5px;
         text-align: center;
        }

main {
         padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to Sample JavaScript Code</h1>
    </header>
       <main>
           <h2 id = "mySection"> Content Section </h2> 
              <p>This is a simple JavaScript page. Please click the following button to change the color of 'Content Section'</p>
              <button onclick="changeColor()">Click to Change Color</button>
     </main>
     <footer>
      <p>&copy; 2024 Your Name</p>
    </footer>
    <script>
    // Javascript code can be included here 
      function changeColor()
        {
         var mySectionElement = document.getElementById("mySection");

if(mySectionElement.style.color == "red")
            {
                mySectionElement.style.color = "green"; // Change the color to green if the color is red
            }
         else
            {
                mySectionElement.style.color = "red"; // Change the color to red
            }
         alert("Color of Content Section has been changed.");
        }
    </script>
</body>
</html>

xxxxxxxxxx
 
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Sample HTML Page</title>
       
    <style>
    /* CSS styles can be included here */
        body{
         font-family: Arial, sans-serif;
         background-color: #f0f0f0;
         margin: 0;
         padding: 0;
        }
​
        header{
         background-color: #333;
         color: #fff;
         padding: 5px;
         text-align: center;
        }
​
        main {
         padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to Sample JavaScript Code</h1>
    </header>
       <main>
           <h2 id = "mySection"> Content Section </h2> <!-- Color of the section will be change on button click. -->
              <p>This is a simple JavaScript page. Please click the following button to change the color of 'Content Section'</p>
              <button onclick="changeColor()">Click to Change Color</button>
     </main>
     <footer>
      <p>&copy; 2024 Your Name</p>
    </footer>
    <script>
    // Javascript code can be included here 
      function changeColor()
        {
         var mySectionElement = document.getElementById("mySection");
​
            
         if(mySectionElement.style.color == "red")
            {
                mySectionElement.style.color = "green"; // Change the color to green if the color is red
            }
         else
            {
                mySectionElement.style.color = "red"; // Change the color to red
            }
         alert("Color of Content Section has been changed.");
        }
    </script>
</body>
</html>

This online JavaScript compiler (editor) is a web-based platform that allows users to write, run, and test JavaScript code directly in the editor without the need for any installation or setup a JavaScript environment on their local machines. This platform is useful for beginners, learners, and anyone who wants to quickly test JavaScript code. It is designed for basic JavaScript code. Users are requested and advised to promote fair coding practices.