All geek questions in one place

Change div id to javascript

I created a simple page to change the div id every time I click submit. My problem is that this changes from div_top1 → div_top2, but the second time I click the button, it stops changing: (

<!DOCTYPE html> <html> <head> <script> function changediv() { document.getElementById("div_top1").innerHTML=Date(); document.getElementById("div_top1").setAttribute("id", "div_top2"); document.getElementById("div_top2").innerHTML="teste"; document.getElementById("div_top2").setAttribute("id", "div_top1"); } </script> <style> .top { background-color: navy; color: white; padding: 10px 10px 10px 10px; margin: 5px 5px 5px 5px; } .down { background-color: aqua; padding: 10px 10px 10px 10px; margin: 5px 5px 5px 5px; } </style> </head> <body> <div id="div_top1" class="top">This is a paragraph.</div> <div class="down"><button type="button" onclick="changediv()">Display Date</button></div> </body> </html>
+4
source share
3 answers

FIDDLE Working Demo

Try the following:

 function changediv() { if (document.getElementById("div_top1")) { document.getElementById("div_top1").innerHTML=Date(); document.getElementById("div_top1").setAttribute("id", "div_top2"); } else { document.getElementById("div_top2").innerHTML="teste"; document.getElementById("div_top2").setAttribute("id", "div_top1"); } }
+12
source

The problem is not in changing the identifier, but in the fact that you change it in both directions every time. You need an if condition. You should also use .id to change the identifier instead of setAttribute (). I had problems with some browsers in the past (many years ago) using setAttribute for identifier changes.

DEMO: http://jsfiddle.net/x2nPY/

 function changediv() { if (document.getElementById("div_top1")) { document.getElementById("div_top1").innerHTML = Date(); document.getElementById("div_top1").id = "div_top2"; } else { document.getElementById("div_top2").innerHTML = "teste"; document.getElementById("div_top2").id = "div_top1"; } }
+3
source

You can use it if, for example, if you want to switch it or change it every time you send, for example:

 function changediv() { if (document.getElementById("div_top1")) { document.getElementById("div_top1").innerHTML=Date(); document.getElementById("div_top1").setAttribute("id", "div_top2"); } else { document.getElementById("div_top2").innerHTML="teste"; document.getElementById("div_top2").setAttribute("id", "div_top1"); } }

See Demo Screenshot

+1
source

Source: https://habr.com/ru/post/1481135/

More articles:


All Articles