Hi all, Say that I have a div with id bla_200; When I refresh the page this id will change in bla_201 or bla_783 and so on. So I never know the exact nr How I can get the div with javascript ? I tried document.getElementById('bla_'+*); but it doesn't work
It depends on how you want it to work. Usually some kind of event would trigger a function. The general idea is to use something like onclick or whatever. <html> <head> <style type="text/css"><!-- div { margin:5px; border:1px solid black; display:block; width: 300px; } --> </style> </head> <body> <script type="text/javascript"> function writeIdToDiv (p_sIdStr) { var myObject = document.getElementById(p_sIdStr); myObject.innerHTML = 'The id of this div object is: ' + p_sIdStr; } function fetchMyDivs () { // this variable is an array and serves as a holder for all divs var aAllDivs = []; // this variable is also an array and servers as a holder for all divs with blabla_nnn id's var aMyDivs = [] // this adds all div objects into the array aAlldivs aAllDivs = document.getElementsByTagName('div'); // a for loop trough all objects in the aAlldivs array makes it possible handle each one of them with ease for (iIdx = 0; iIdx < aAllDivs.length; iIdx++) { // does this div object have a underscore followed by a number at he end of the it's id? if (null !== aAllDivs[iIdx].id.match(/_\d+?$/)) { // ok, if it had a number, so append that div object to the aMyDivs array aMyDivs[aMyDivs.length] = aAllDivs[iIdx]; } } // now all your div objects with id's blabla_nnn is in the aMyDivs array and you can do whatever you need with them, // how about calling another function and give them random colours for instance for (iIdx = 0; iIdx < aMyDivs.length; iIdx++) { aMyDivs[iIdx].style.backgroundColor = randomColour(); } } function randomColour() { var sNumbers = "456789"; var iStrlen = 6; var sRandomStr = '#'; var iRandNum = 0; for (i = 0; i < iStrlen; i++) { iRandNum = Math.floor(Math.random() * sNumbers.length); sRandomStr += sNumbers.substring(iRandNum, iRandNum+1); } return sRandomStr; } </script> <div id="blabla_879463543" onclick="writeIdToDiv(this.id)">Click to trigger writeIdToDiv</div> <div id="blabla_45679" onclick="writeIdToDiv(this.id)">Click to trigger writeIdToDiv</div> <div id="blabla_124" onclick="writeIdToDiv(this.id)">Click to trigger writeIdToDiv</div> <div id="blabla_987" onclick="writeIdToDiv(this.id)">Click to trigger writeIdToDiv</div> <div id="blabla_542" onclick="writeIdToDiv(this.id)">Click to trigger writeIdToDiv</div> <div id="blahoo" onclick="writeIdToDiv(this.id)">Click to trigger writeIdToDiv</div> <div id="booh" onclick="writeIdToDiv(this.id)">Click to trigger writeIdToDiv</div> <div>Press the button below to change colours on the divs with id's like blabla_nnn</div> <button onclick="fetchMyDivs()">Click here to call two functions: fetchMyDivs and randomColour</button> </body> </html> Code (markup): This is probably not what you want, but you weren't very specific...
thank you both - there is a lot of code but I only need to select the div - only one - to change an image. I will explain better .. I made a function that act on body load. On my page i have a div with id="statictext_differentid" eg. bla_2343 The id is always changing when i refresh the page. I can't add "<div id="div_948" name="changingdiv"> then getElementByName('changingdiv')? " because the php source code is encrypted. So I need to select only the div that match bla_5345
Ok, so there is only one div in the sourcecode with an id like bla_5345 and you want to change the image inside it on load?
Hi, if you place this div inside another, you can set image with css only: <style> div#mydiv div{ ........... } </style> ............. <div id="mydiv"><div id="random">...</div></div> HTML:
yes but remember that the number bla_5345 is always changed . At this moment I want to change the image but I will need to put flash also - so i can't use css. I want to use document.getElementById('').innerHTML = ''; so to easily change the content inside the div
<body onload="replaceBlabla('div');"> Code (markup): function replaceBlabla(p_sObjType) { var aAllObj = []; var oMyObj = null; aAllObj = document.getElementsByTagName(p_sObjType); for (iIdx = 0; iIdx < aAllObj.length; iIdx++) { if (null !== aAllObj[iIdx].id.match(/_\d+?$/)) { oMyObj = aAllObj[iIdx]; } } oMyObj.innerHTML = 'your html....'; return false; } Code (markup):
thank you very much wing Instead to make a new post i will post here another problem .. <script type="text/javascript"> function today_nw() { var dv = document.getElementById('introheader'); dv.innerHTML+=' <div id="today_update">Hello World!</div>'; } if (window.addEventListener) window.addEventListener("load", today_nw, false) else if (window.attachEvent) window.attachEvent("onload", today_nw) else window.onload=today_nw; </script> Code (markup): What is wrong with this code ? I want to add the div today_update in the introheader div I want to use addEventListener instead of <body onload="today_nw()">
I tested the code in IE and FF.. and it works fine. Make sure you have a div named 'introheader' and that you don't have any other scripts that will interfere with the onload events..