CODEWITHSUNDEEP
javascripthtmlcssfunction
hubschrauber
hubschrauber

Reputation: 55

Div element should show up when clicked

I want a div element, on which I click. Then another div element should pop up. I tried something, but don't know, why it doesn't work.

<div class="div" onclick="myFunction()">
  <img class="image" src="..." height="80px" width="80px">
  <h2 class="header">text</h2>
  <img class="more" src="..." height="50px" width="50px">
  </div>
  <script>
  function myFunction() {
  document.getElementById('text')
  [0].classList.toggle('display')
  <div class="news" onclick="myFunction()">
  <img class="coronanewsimg" src="https://www.mediothek-krefeld.de/files/content-fotos/Bilder%20fuer%20Neuigkeiten%20und%20Slider/628px-Achtung.svg.png" height="80px" width="80px">
  <h2 class="coronanewshead">Sonderschließzeit bis vorraussichtlich 07.03.21 aufgrund des Coronavirus</h2>
  <img class="mehr-pfeil" src="pics/mehr-pfeil.png" height="50px" width="50px">
  </div>
  <script>
  function myFunction() {
  document.getElementById('coronanewstext')
  [0].classList.toggle('display')
  }
  </script>
  <div class="text">
text
</div>

Upvotes: 0

Views: 51

Answers (2)

Krithick S
Krithick S

Reputation: 486

You could also use this method to create a div element when the event occurs.

<!DOCTYPE html>
<html>
 <head>
  <title>Event handling</title>
 </head>
 <body>
  <p>Click the button to pop up another div element.</p>
  <button onclick="popDiv()">Click me</button>
 <script>
  function popDiv() {
  var division = document.createElement("div");
  division.innerText = "This is a new DIV element";
  division.style.color = "blue";
  division.style.margin = "10px";           //Simple styling of div
  division.style.background = "whitesmoke";
  division.style.border = "1px solid black";
  document.body.appendChild(division);
  }
 </script>
 </body>
</html>

Also correct upon the tag's opening and closing in your code, or this may also result in error.

Upvotes: 1

user3732793
user3732793

Reputation: 1959

simple example how on click works for an element id

<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>How to display the Day, Date, Time at the touch of a button</h1>
<p id="demo">We would like it to appear hear.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>

Upvotes: 0

Related Questions