JavaScript - Javascript That Writes A New Page With Document.write
I've written the following html,
<html> <head> <script type="text/javascript"> function createpage(){ var first = document.getElementById('first').value var second = document.getElementById('second').value var third = document.getElementById('third').value var j = window.open('random'); var new_page = '<html><head><script type="text/javascript">function open_win() { window.open(first) window.open(second) window.open(third) } </script></head><body onLoad = "open_win()"></body></html>'; j.document.write(new_page); j.document.close(); } </script> </head> <body> <form action=""> <p> First Link: <input type="text" id="first" name="first"/> Second Link: <input type="text" id="second" name="second"/> Third Link: <input type="text" id="third" name="third"/> <input type=BUTTON value="Submit" name="mySubmit" onClick="createpage();return false;"> </p> </form> </body> </html> With the intention to eventually implement it into a website that "mashes" several URLs together into a tinyurl that, upon being opened, creates several tabs of the content the creator wanted in the single URL. Does that make sense? In order to best do this I figured a page with a random character string (I haven't yet implemented this part, for now 'random' holds the place of the new page/link) would have to be created that would launch all the tabs and then close itself. Here's what it should do... 1) User enter 3 URLs into three forms: First Link: <input type="text" id="first" name="first"/> Second Link: <input type="text" id="second" name="second"/> Third Link: <input type="text" id="third" name="third"/> 2) User clicks Submit button that calls "createpage()" function that's declared in the <head>er. The first part of this function declares the links that were inputted as variables first, second, and, third. <script type="text/javascript"> function createpage(){ var first = document.getElementById('first').value var second = document.getElementById('second').value var third = document.getElementById('third').value 3) "createpage()" function then declares a new window named 'random' to variable j (I have random.html stored in the same folder as this project. It is empty.) var j = window.open('random') 4) Next "createpage()" creates a variable that stores a full page's html code that includes a script that launches each link individually with window.open(). var new_page = '<html><head><script type="text/javascript">function open_win() { window.open(first) window.open(second) window.open(third) } </script></head><body onLoad = "open_win()"></body></html>'; 5) "createpage()" writes the code (stored in variable 'new_page') to document 'random' with j.document.write(new_page); 6) "createpage()" closes the document. Similar TutorialsSo Im trying to make it so my button writes in one box when I click it one time, another when I click it a second, etc, but when I click it once, it writes in all boxes. Why is this? Code: content += "<br><input type='text' value='' id='d1' name='d1'><br>" content += "<input type='button' value='random card' id='r1' name='r1' onclick='randomCard()'>" content += "<div id='c1' name='c1'></div><div id='c2' name='c2'></div><div id='c3' name='c3'></div><div id='c4' name='c4'></div><div id='c5' name='c5'></div><div id='c6' name='c6'></div><div id='c7' name='c7'></div><div id='c8' name='c8'></div><div id='c9' name='c9'></div><div id='c10' name='c10'></div><div id='c11' name='c11'></div>" function checkValue(){ if (c1.innerHTML == ""){ c1.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML == ""){ c2.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML == ""){ c3.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML == ""){ c4.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML == ""){ c5.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML == ""){ c6.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML == ""){ c7.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML == ""){ c8.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML != "" && c9.innerHTML == ""){ c9.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML != "" && c9.innerHTML != "" && c10.innerHTML == ""){ c10.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML != "" && c9.innerHTML != "" && c10.innerHTML != "" && c11.innerHTML == ""){ c11.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>" } else{ if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML != "" && c9.innerHTML != "" && c10.innerHTML != "" && c11.innerHTML != ""){ alert('How in the **** did you get more than eleven cards?') } else{ } } } } } } } } } } } } } function randomCard(){ for (c=0;c<DCard.length;c++){ randCard = DCard[Math.floor(Math.random()*DCard.length)] document.getElementById('c1').value = randCard c1 = document.getElementById('c1') c2 = document.getElementById('c2') c3 = document.getElementById('c3') c4 = document.getElementById('c4') c5 = document.getElementById('c5') c6 = document.getElementById('c6') c7 = document.getElementById('c7') c8 = document.getElementById('c8') c9 = document.getElementById('c9') c10 = document.getElementById('c10') c11 = document.getElementById('c11') checkValue() } } Not my whole code, but the necessary parts. I have am currently taking over as the developer for this web site, and the developer who left the project unfinished wrote a script. What it does is takes posts from vBulletin forums, for instance News posts, and then it grabs the posts by ID and Title and writes the title on the home page of the web site. The problem right now that I have is the test wraps, you can see what I mean here http://www.netcodeilluminati.com/v2 If you look on the left, I want to make the text cut off after a certain amount of characters with "..." at the end as if there is more to the title but you can't see it. Here is the script: for (x = 0; x < 5; x++) { document.write("<li><div class=\"li_icon\"><img src=\"images/icons/text.png\" alt=\"text\" /></div><div class=\"li_text\">"); document.write("<a href=\"../forums/showthread.php?t="+threads[x].threadid+"\">"+threads[x].title+"</a></div></li>"); } I was wondering how I could go about doing this. Thanks for any future help. -Kevin So I have an HTML page with javascript that takes input values, computes some results, and then puts these results in a table. Works great. Now I realize some users might want to print just the results table. So I add a button that allows the user to request the table in a separate window; clicking the button invokes a script to re-create the table in a separate window. Works fine except: * In the status bar, the window appears to never finish loading * If you go to File -> Print then nothing seems to happen; however, if you close the generated window _then_ the print dialog appears; the window you want to print, however, is gone. Any suggestions? The code invoked by clicking the newly added button: [CODE] function grabResults() { var w = window.open("","ROIResults"+winCount++, "height=400,width=600,menubar=yes"); var d = w.document; d.write('<head>'); d.write('<link href="style.css" title="compact" rel="stylesheet" type="text/css" />'); d.write('<title>Return On Investment Calculations</title>'); d.write('</head>'); d.write('<body>'); d.write('<div id="logoholder">'); d.write(' <img src="TTFlogo2.gif" alt="Cannott display logo" "width="322" width="322" height="51"></p>'); d.write('</div>'); d.write('<div id="header">'); d.write(' <h2>Return on Investment Estimator for Classroom Training</h2>'); d.write('</div>'); d.write('<table rules="all" frame="box">'); d.write('<caption>Results - Estimated ROI</caption>'); d.write(' <tr><th>Course</th>'); d.write('<td class="center" id="courseName">'+cname+'</td>'); d.write(' </tr>'); d.write(' <tr><th>Duration (Days)</th>'); d.write('<td class="center" id="courseDur">'+cdays+'</td>'); d.write(' </tr>'); d.write(' <tr><th>Class Size</th>'); d.write('<td class="center" id="courseSize">'+csize+'</td>'); d.write(' </tr>'); d.write(' <tr><th>Location</th>'); d.write('<td class="center" id="courseLoc">'+teach_loc+'</td>'); d.write(' </tr>'); d.write(' <tr><th>Training Cost</th>'); d.write('<td class="justr" id="courseCost">'+TC+'</td>'); d.write(' </tr>'); d.write(' <tr><th>Initial Value</th>'); d.write('<td class="justr" id="courseInitial">'+startValue+'</td>'); d.write(' </tr>'); d.write(' <tr><th>Returned Value</th>'); d.write('<td class="justr" id="courseValue">'+RV+'</td>'); d.write(' </tr>'); d.write(' <tr><th>Increase in Value</th>'); d.write('<td class="justr" id="courseIncr">'+Inc+'</td>'); d.write(' </tr>'); d.write(' <tr><th>Net ROI after costs</th>'); d.write('<td class="justr" id="courseROI">'+ROI+'</td>'); d.write(' </tr>'); d.write(' <tr><th>ROI Rate</th>'); d.write('<td class="justr" id="courseROIRate">'+ROIR.toFixed(2)+'%</td>'); d.write('</tr> '); */ d.write('</table>'); d.write('<p class="in3">(All amounts are in US Dollars.)</p>'); d.write('</body>'); d.write('</html>'); d.close(); return true; } [ICODE] Without elaboration plz see my code: Code: <body> <script> var b="s"; </script> <button target="_blank" onclick="window.open('http://......php?b="javascript:document.write(b);"&id=2&q=<?php print $_GET['q']; ?>','1','');return false;">xyz</button> </body> i don understand why this javascript:document.write(b); doesnt work in url... i know its simple yet it make my hair out of my head. plz count it.. I'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed. So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write. Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script. Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script. Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too. Thanks in advance! My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE> <META content="text/html"; charset="UTF-8" http-equiv="content-type"> <SCRIPT type="text/javascript"> function createTable(){ var Etudiant = new Array(Number(prompt("How many Students will you put in ?",""))); document.write("<table border=\"1\">"); for (var i=0; i<Etudiant.length; i++) { Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","") alert("Nice to see you "+Etudiant[i]); document.write("<td>"+Etudiant[i]+"</td>"); j = parseInt(prompt("Combien de notes voulez vous calculez ?")); for (h=0;h<j;h++){ notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i])); document.write("<td>"+notes[h]+"</td>"); } document.write("<tr>"); } document.write("</tr>"); document.write("</table>"); document.getElementById('monTab').innerHTML=Etudiant; } </script> <BODY> <H1>Combien de note voulez vous cumulez ?</H1> <br> <br> <input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()"> <div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div> </BODY> </HTML> Hi i have a function (i wont write it out coz it is too long!) but after i have done the main calculations within this function i wont to display some of the variables in a table. i have writen: document.write( <table border="1"> <tr><td> Value 1 </td><td> document.write(a); //here * </td></tr> </table> ); were it says "here *" i wont to write within the table variable a (which i have defined properly in the function). However, as i have already written document.write it actually displays the text "document.write(a);" instead of the value for var a. Help asap please as it in for school soon! Thanks in advanced :D What is an alternative to document.write? I know I could use <p> in html </p> I would like to use JS though. I hope you can understand my question. I am 14yo and this is not for homework. I just wanna try and learn JS. I read document.write can cause me problems. But all I ever see is: <script type="text/javascript"> document.write("any words"); </script> what alternate could I use? Hello, I'm new to Javascript. I know how to make a script that when you click on a button it changes a variable. I also know that with document.write I can express this variable but I do not know how to refresh document.write! For example, if I have a var car =3 and when I click on a button car++ (or increases by 1 so it becomes 4 then 5 and so forth depending how many times you click the button) and I write document.write (car), it only shows the 3 and no matter how many times I click on the button, the 3 doesn't change. How can I get the document.write to show the updated variable? Thanks! So I want to have a button that when I click it will change this variable and that number will change live on the page. document.write("<table><tr><td><a href='#' onMouseOver='MM_swapImage('changeMe','','images/calNum/calNum4g.jpg',1);'><img id='changeMe' name='changeMe' src='images/calNum/calNum1.jpg' border='0'/></a></td></tr></table>"); basically the one thing I am know is a problem or at least where the problem starts is when the ","(comma) is added in the parathesis for the params of MM_swapImage. Whats the correct way to write those commas? Below is a mock snippet of what I need. I think the issue is Code: document.write(b) because if I change that to an alert, it works fine. I thought I was using the proper syntax, but I guess I am not. Can anyone help a noob? Code: <html> <head> <script type="text/javascript"> function d(){ a=document.getElementById("txt1").value; if(a > 1){ b=a/100; document.write(b) } else{ b=a; alert(b) } } </script> </head> <body> <form name="form"> <h2>This is a form</h2> <input type="text" id="txt1" name="txt"/> type here <br /> <button type="submit" id="btn" onclick="d()">Submit</button> </body> </html> my arrays. how do i input them into the loop? firstName = new Array(); lastName = new Array(); street = new Array(); city = new Array(); state= new Array(); zip = new Array(); amount = new Array(); date = new Array() Code: <script type=text/javascript> var values = []; var SIZE = 10; document.write('<table class="mytable" border="1">'); for (var index = 1; index <= SIZE; index++) { document.write('<tr><td>'); values.push(Math.random()); document.write(values[values.length -1]); document.write('</tr></td>'); } document.write('</table>'); var sum = 0.0; for (var index = 0; index < values.length; index++) { sum += values[index]; } document.write('<table class="totaltable" border="1">'); document.write('<tr><td>Total Number of Rows</td></tr><td> Total Sum</td></tr>'); document.write('<tr><td>' + values.length + '</td></tr>' + sum + '</td></tr>'); ('</table>'); </script> Hello everyone, I am new I found this site while searching for help with my problem. I'm new to javascript and having a very hard time with the document.write. Can anyone tell me why I'm getting this error? Error: missing ) after argument list Source File: file:///G:/CINS%20157/tutorial.12/case1/clist.htm Line: 79, Column: 58 Source Code: document.write("<th id='sumTitle' colspan='2'>" Summary "</th>"); Then there is an arrow pointing between the S and u in Summary. Even if you could just tell me where to look for help with the answer that would be greatly appreciated. If it helps this is the code it is attached to: <script type="text/javascript"> document.write("<table border='1' cellspacing='1'>"); document.write("<tr>"); document.write("<th id='sumTitle' colspan='2'>" Summary "</th>"); document.write("</tr>"); document.write("<tr><th>" Contributors "</th>"); document.write("<td>"+amount.length+ "</td></tr>"); document.write("<tr>") document.write("<th>"); document.write(Amount); document.write("</th>"); document.write("<td>"+amountTotal()+"</td>"); document.write("</tr>"); document.write("</table>"); </script> Thanks in advance for any help you can give me. I really appreciate it. This seems like it should be easy but I can't figure it out. I am trying to set up a drop down list to interpret an abbreviation and to also hyper link to a site about the object. I want it to stay in the <textarea> and not write a new document but it is the only way I have been able to get a hyperlink. Any suggestions would be appreciated. Here is my HTML and JS HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>ACRONYMS</title> <script type= "text/javascript" src="abbs2.js"> </script> <style type="text/css" media="Screen"> fieldset { border: 5px solid #555555; padding: 20px; width:350px; word-wrap: normal; } </style> </head> <body> <fieldset style="width:410px; height: 250px;"> <h2>DESCRIPTION BY ABBV</h2> <form name = "listNAME"> <select name="abbWRD"> <option value=AIR>AIR</option> <option value=CCVT>CCVT</option> </select> </form><br> <input value="Click for Description" onclick="findMEAN()" type="button"> </br></br> <textarea id="resultbox" style="width:400px; height:75px;"></textarea> </fieldset><br> </body> </html> And JS: Code: /** * @author zero3ree */ function findMEAN(){ var abb = document.listNAME.abbWRD.value; if (abb == "AIR"){ abbs = ("AIR Commercial Real Estate") ; abbslnk = document.write("" + abbs.link("http://www.airea.com") + "");} else if (abb == "CCVT"){ abbs = ("COUPLING CAPACITOR VOLTAGE TRANSFORMER") ; abbslnk = document.write("" + abbs.link("http://www.abb.com/product/db0003db002618/c12573e7003302adc1256ffd001d1256.aspx") + "");} { var result=document.getElementById("resultbox"); result.value = abbslnk } } Thanks in advance. document.write("<script type='text/javascript' src='http://www.website.com/javscript.js'></script>"); For some reason this will not output correctly. It ouputs "); Which is the last three characters. Hi all, I'm working on an internal site for my company and I have a snippet of code that works 100% fine indepentantly but when I try to use it inside a document.write I can't get it to work. I'm pretty sure it's down to the structure of it but I'm inexperienced with JS so I'm not sure how do correctly structure it. Here is the code I want inside of a document.write(): Code: <a href='javascript: void(0);' style="text-decoration:none; font-size:14px;" onclick=" document.getElementById('my_hidden_div_id_1').innerHTML = '<iframe src=\'{file:link}\' width=\'880\' height=\'500\'></iframe>' $('#my_hidden_div_id_1').koverlay({title: '{file:filename}'}); $('.css_koverlay').css({'background-color':'#9c183a'}); ; "> Pop-Up</a> Could anyone help me correctly insert it inside document.write() so that it outputs without errors? Thanks! I am very new to JavaScript, however I already seem semi-stumped. The tutorial I am using, mentions that for tutorial example purposes they use document.write() however it suggests that I avoid using this as it will overwrite the whole HTML page. I know that I can use document.getElementById() for some things... however this begs my question: When do you use document.write(), when do you use document.getElementById() and is there also another method you use to change/write to the HTML Document using JavaScript? Otherwise, do you just use document.getElementById() quite a lot in JavaScript? Like I said, I'm very new to JavaScript, so it's all still very new to me. Cheers, Asher What other methods can I use to insert code into my HTML pages from an external file, that will be able to be picked up by search engines and will show entirely if you do a "View Source" on my page? I've been using document.write functions in my personal home page for doing things like maintaining nav. bars, footers, etc. However, the HTML that's written using document.write is not picked up by search engines being that its browser-side instead of server-side and if you view the source of the page, all it shows is the call to my JS function that does the document.writes. |