document.getElementById("xxxxx").innerHTML isn't working at all? - javascript
I am having a problem trying to write a String Variable's value to a specific element in the DOM to the specific div.
let's say game=TEN
document.getElementById("game").innerHTML=game;
doesn't write to:
<div id="game"></div>
Problem is with the code below I have a script and at the end of that script I can document.write(game) and it works fine, but I can't write it to the div? Maybe I am trying to do this wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<!--<form id="teamSelect"onsubmit="return function games();"><select>
<option value="TEN">Tennessee</option>
<option value="GB">Green Bay</option>
</select>
<input type="submit" name="Submit" />
</form>
-->
<script>
var jsonString = '{"ss":[["Thu","7:30","Pregame",,"JAC",,"NE",,,,"55425",,"PRE1","2011"],' +
'["Thu","7:30","Pregame",,"BAL",,"PHI",,,,"55424",,"PRE1","2011"],' +
'["Thu","8:00","Pregame",,"SEA",,"SD",,,,"55423",,"PRE1","2011"],' +
'["Thu","8:30","Pregame",,"DEN",,"DAL",,,,"55426",,"PRE1","2011"],' +
'["Thu","10:00","Pregame",,"ARI",,"OAK",,,,"55427",,"PRE1","2011"],' +
'["Fri","7:30","Pregame",,"MIA",,"ATL",,,,"55430",,"PRE1","2011"],' +
'["Fri","7:30","Pregame",,"CIN",,"DET",,,,"55429",,"PRE1","2011"],' +
'["Fri","7:30","Pregame",,"PIT",,"WAS",,,,"55431",,"PRE1","2011"],' +
'["Fri","8:00","Pregame",,"TB",,"KC",,,,"55428",,"PRE1","2011"],' +
'["Fri","8:00","Pregame",,"SF",,"NO",,,,"55432",,"PRE1","2011"],' +
'["Sat","7:30","Pregame",,"GB",,"CLE",,,,"55433",,"PRE1","2011"],' +
'["Sat","8:00","Pregame",,"NYG",,"CAR",,,,"55437",,"PRE1","2011"],' +
'["Sat","8:00","Pregame",,"BUF",,"CHI",,,,"55434",,"PRE1","2011"],' +
'["Sat","8:00","Pregame",,"IND",,"STL",,,,"55435",,"PRE1","2011"],' +
'["Sat","8:00","Pregame",,"MIN",,"TEN",,,,"55436",,"PRE1","2011"],' +
'["Mon","8:00","Pregame",,"NYJ",,"HOU",,,,"55438",,"PRE1","2011"]]}';
//var jsonString = '{"test": "test1"}';
for (i=0; i<15;i++) {
if ("TEN" == eval('(' + jsonString + ')').ss[i][6] || "TEN" == eval('(' + jsonString + ')').ss[i][4]) {
var game=(eval('('+jsonString+')').ss[i][6] + ' vs ' + eval('('+jsonString+')').ss[i][4]);
var day=(eval('('+jsonString+')').ss[i][0] + ' at ' + eval('('+jsonString+')').ss[i][1]);
}
}
document.write(game);
document.getElementById("game").innerHTML=game;
</script>
<div id="game" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:16px">hello</divŠ®
</body>
</html>
At the time you execute the script and you're looking for the element, it does not exist yet because it comes later on.
To be precise, it has not been parsed and added to the DOM yet.
So move your scripts to the bottom of the HTML file (at least below the element).
If you are using some kind of library, it can be solved easily too: for jQuery for example, place everything inside a $(function() { ... } block. That way, it isn't until the DOM has fully loaded that it gets executed (at which time you can safely search for the element).
On the moment when you are trying to access the #game element it is not yet created.
You should wait for the onload event and bind the function to this event:
<script type="text/javascript">
function init() {
/**your code here**/
}
</script>
<body onload="init()">
<div id="game"></div>
</body></html>
The Init() function will not work, because the DOM is not entirely loaded. Either you get yourself jquery or dojo and use the document ready functions, or place the javascript block at the end of your html document, aka before the closing body tag.
Get yourself Firebug, and rewrite the code like this for the beginning:
<html>
<body>
<div id="myid"></div>
</body>
<script language="Javascript">
document.getElementByID('myid').innerHTML = ....
</html>
Tamer
or you can use jqueries
$(document).ready(function(){});
Related
unable to upload dicom images upon click event - webMango
I am using webMango and I modified the html syntax to upload DICOM images upon a clicking the browse button. As of now I have hardcoded the value of the params[] variable. It still does not work. Upon selecting random files, I still get an empty DICOM viewer and no images are uploaded. Also, even if I initialize params[] to the actual images, the viewer gives an incorrect view the images. The sagittal and coronal views are not shown. Here's my code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>webMango</title> <script src="mango.js"></script> <script src="https://www.java.com/js/deployJava.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var params = []; $(document).ready(function(){ var filetarget="[["; $("#uploadFile").change(function(event){ $dir = $("#directory").val(); $dir = "data"; for( var i=0; i<event.target.files.length; i++) { filetarget = filetarget + "'" + $dir + "/" + $(this).val() + "'"; if(i != event.target.files.length -1) filetarget= filetarget + ","; } filetarget = filetarget + "]]"; //params["images"] = "\"" + filetarget + "\""; params["images"]="[['data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm']]"; }); }); </script> </head> <body> <p>This is an example use of webMango.</p> <label> Directory root </label> <input type="text" id="directory"/> <br/> <input type="file" id="uploadFile" multiple directory webkitdirectory mozdirectory/> <div style="width:800px;" class="mango" id="mango"></div> </body> </html>
It's not designed to work with Jquery, but with a small modification, I think you can do what you want. First, in mango.js, remove this line: window.onload = runMango; // it's at the bottom Next, see the below example use with JQuery. Note the call to runMango(). <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>webMango</title> <script src="mango2.js"></script> <script src="https://www.java.com/js/deployJava.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var params = []; $(document).ready(function() { params["images"] = "['data/sample_image.nii.gz']"; runMango(); }); </script> </head> <body> <p>This is an example use of webMango.</p> <div style="width:800px;" class="mango"></div> </body> </html> Also, even if I initialize params[] to the actual images, the viewer gives an incorrect view the images. The sagittal and coronal views are not shown. Not sure about this one. I noticed all your images references are to the same file, so maybe that had something to do with it. Make sure your series contains references to all the different files in the series.
open a simple pop up window with my string contents
I used jquery getJSON method to get the two strings from java servlet. one string contains the type of data like simple string, XML and HTML and another string contains data. I need to open a popup window with different size based on contents. Below the code used to get the strings. <%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>AJAX calls using Jquery in Servlet</title> <script src="http://code.jquery.com/jquery-latest.js"> </script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(document).ready(function() { $('#submit').click(function(event) { var applid=$('#applicationid').val(); var applname=$('#appname').val(); $.getJSON('ActionServlet', { appid:applid, appname:applname },function(data) { var errortype = data.errortype; var errorMsg = data.errorMsg; }); }); }); </script> </head> <body> <form id="form1"> <h1>AJAX Demo using Jquery in JSP and Servlet</h1> Enter your Name: <input type="text" id="applicationid"/> <input type="text" id="appname"/> <input type="button" id="submit" value="Ajax Submit"/> <br/> <div id="hello" title="Hello World!"></div> </form> </body> </html>
You can user fancybox. It gives options for opening the passed html string check here
To open a new window you can use the window.open() function. To display the XML as raw text, you need to escape the special characters. Javascript does not have builtin function for it (like htmlentities() in php). You can try the following code: function htmlentities(str) { return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); }
Call javascript function into a link when it is printed
I'm making a little application with intel xdk I have already passed id values from one page to another. My problem is when I print some links in html I can't pass value from the other page. I'm trying by this way: <script> document.write("<a href='#' onclick='sendID('page2.html', '21')'>Link</a>"); </script> I have passed id value from one page to another but in this case I need to pass from a printed link. Is it possible or there is another way. Thanks! Also I don't know if there is another way to call a function that receives parameters when the link is printed. More information. Into my head tag: <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function sendID(dir, id) { dir +="?"; nomVec = id.split(","); for (i=0; i<nomVec.length; i++){ dir += nomVec[i] + "=" + nomVec[i]+"&"; } dir = dir.substring(0,dir.length-1); location.href=dir; } </script> </head> And in my body tag: <body> Right link<br> <br> <br> <script> document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>"); </script> </body> In the first link the function is called and I get redirected to the other page, but in the printed link is doesn't work.
You have to do something like this <body> <script type="text/javascript"> function sendID(dir, id) { dir +="?"; nomVec = id.split(","); for (i=0; i<nomVec.length; i++){ dir += nomVec[i] + "=" + nomVec[i]+"&"; } return dir.substring(0,dir.length-1); } </script> <script> document.write("Link"); </script> </body> alternatively you can also do a document.write(<<escape and put the sendID javascript function here>>) following by the document.write that prints the anchor tag.
<!DOCTYPE html> <html> <style type="text/css"> </style> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function sendID(dir, id) { dir +="?"; nomVec = id.split(","); for (i=0; i<nomVec.length; i++){ dir += nomVec[i] + "=" + nomVec[i]+"&"; } dir = dir.substring(0,dir.length-1); location.href=dir; } </script> </head> <body> click here <br> <br> <script> document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>"); </script> </body> </body> </html>
How do I replace a bit of text with string variable in javascript?
I know this is a really simple question, but I need to replace this bit of text in a paragraph with a variable every time an even fires. The markup looks like this "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #container {width:100%; text-align:center; } #heading {width:100%; text-align:center; } </style> </head> <div id="heading"> <h1>hello</h1> </div> <body> <div id="container"> <textarea name="mytextarea" cols="60" rows="40"></textarea> </div> </body> </html> What I need is where it says "hello" in the tags, is for that to be a variable that van be replaced by a string that I will generate.
You could create a function that looks something like this. function replaceTitle (replaceText) { document.getElementById("heading").getElementsByTagName("h1")[0].innerHTML = replaceText; } If you are using jQuery it could look more like this. function replaceTitle (replaceText) { $("#heading h1").html(replaceText); } Then you call the function like this replaceText(yourVariable); It would probably be better to give your <h1> tag an id or a class so you can reference it directly, but I am going to assume that you have good reason for not doing so.
One example on how can be simple things made complicated :) javascript: // simple way: function replace_text(text) { var heading = document.getElementById('heading'); heading.innerHTML = '<h1>' + text + '</h1>'; } // complicated way: function replace_text2(text) { var heading = document.getElementById('heading'); var node = heading.childNodes[0]; while ( node && node.nodeType!=1 && node.tagName!='H1' ){ //console.log(node.nodeType,node); node = node.nextSibling; } if (node) { node.replaceChild(document.createTextNode(text),node.childNodes[0]); } } html: <input type="button" onclick="replace_text('HELLO 1!');" value="Replace 1st text" /> <input type="button" onclick="replace_text2('HELLO 2!');" value="Replace 2nd text" /> The script is here.
HTML + Passing Param b/w Parent & Child
It might be a simple, but the funny thing is i've tried it for almost 2-3hrs and haven't been able to solve it :(. I have a parent window, which has a text box, and it has a value. I do a window.open and open a client and try to read the value of the parent, but unable to get the value. Any help!! I've tried window.parent.document.getElementById(window.name) window.parent.document.getElementById('test').value window.opener.document.getElementById('teast').value window.parent.opener.document.getElementById('teast').value window.opener.parent.document.getElementById('teast').value Almost all the permutation and combination. And its pure HTML.
Due to security restrictions, Javascript is unable to access documents that reside on a separate domain from the current one. So, if your parent is on a different domain from the child, this will never work.
window.opener.document.getElementById('test').value should work.
I've tried that, it ain't work. I'm posting the code test.html <html> <head> <title>Chat</title> </head> <body> <div id="chatMessages"></div> <script> var newWin = null; var OpenWindow = null; function popUp(strURL, strType, strHeight, strWidth) { if (newWin != null && !newWin.closed) newWin.close(); var strOptions=""; if (strType=="console") strOptions="resizable,height="+ strHeight+",width="+strWidth; if (strType=="fixed") strOptions="status,height="+ strHeight+",width="+strWidth; if (strType=="elastic") strOptions="toolbar,menubar,scrollbars,"+ "resizable,location,height="+ strHeight+",width="+strWidth; alert(window.parent.document.getElementById(window.name)); newWin = window.open(strURL, 'alertWindow', strOptions); //newWin.document.getElementById("child").value='Str'; newWin.focus(); // send_data(data); } function chat() { popUp('../alert.jsp','console',250,600); } </script> <form name="AlertReceiverOnHeader" onclick="chat()"> <input type="text" value="teast" id="teast" name="teast"/> </form> </html> child.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Alert</title> </head> <body onload="load()"> <script language="JavaScript"> function load() { alert('In load'); alert("001="+window.parent.document.getElementById('teast')); alert("002="+window.parent.document.getElementById(window.name)); alert("003="+window.opener.document.getElementById('teast').value); } </script> <form name="child"> <input type="text" id="child" value="child"/> </form> </body> </html>