CODEWITHSUNDEEP
javascriptalertgetelementbyid
user4138475
user4138475

Reputation: 119

Alert using getElementById()

I am trying to create an alert function using the getElementById and it is not working. This is a very simple button i am trying to create but obviously its not simple for a noob like me. Thank you for all your help in advance. This is what i currently have:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>alert</title>
</head>

<body>
  <button onclick= "click()" style="color:green;" >click</button>

  <script>

        function click() {
          document.getElementById("alerting").innerHTML = "I am an alert";
        }

 </script>
</body>
</html>

Upvotes: 1

Views: 1207

Answers (2)

DynasticSponge
DynasticSponge

Reputation: 1441

You dont have any html elements with id="alerting" into which you can set the innerHTML.

If you want a popup alert instead of doing the innerHTML thing... just do:

alert("I am an alert");

Also of note... some browsers wont like functions named: "click".

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>alert</title>
</head>
<body>
    <button onclick="someFunction()" style="color:green;" >Click Me</button>
<script>
    function someFunction()
    {
        alert("I am an alert");
    }
</script>
</body>
</html>

Upvotes: 1

Ashish
Ashish

Reputation: 4330

You need to add an element with id="alerting" where your text will appear. Otherwise document.getElementById("alerting") will return null and calling innerHTML on it will throw error.

<body>
	<button onclick= "myFunction()" style="font-size:25px;" >click</button>
	<p id="alerting">element with alerting id. value will change here</p>

<script>
  function myFunction() {
    document.getElementById("alerting").innerHTML = "Hello World";
  }
</script>

</body>

Upvotes: 2

Related Questions