JavaScript - Function To Write In Seperate Div's Writes In All, Help?
So 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. Similar TutorialsI'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. Hi, someone helped me and wrote this code for me: Code: <script> var totalWidth = 0; $("#gallery img").each(function(){ totalWidth += $(this).width(); }); alert(totalWidth); </script> it alerts the width of all my images, great! But now, I need to add onto that 20px between each image and 104px or so onto the end Then I need to be able to write it out to the style of the #content div? here's the site: http://www.jbiddulph.com/chrisbradshaw Please help?! Hello everyone I have just found this wonderful forum through Dr Google whilst looking for an answer to my incredibly frustrating question! I am an OU student it is for an assignment I just cannot find the answer in any of the books and searching the net has got me nothing but so far wasted 3 hours Here is the code snippet: Code: // candidates var candidateArray = ['Mr R Green...', 'Ms O Brown...', 'Ms Y Black...', 'Mr G White...', 'Ms B Grey....','Ms I Blue....', 'Mr V Pink....']; // online votes var onlineVotesArray = [21,47,23,11,56,47,30]; // paper votes var paperVotesArray = [12,4,20,11,5,4,17]; //total votes var totalVotesArray = (candidateArray.length); First I had to add a new array called totalVotes and assign a length to it the same as candidateArray, I have done this in the last 2 lines I think this is correct, the question did stipulate that if the candidate array was changed then so would the total votes array hence linking it via length. Now here is where I am at a complete loss The exact wording is as follows: Use a for loop to calculate the total votes for each candidate according to the following structured english: for each array position add the element at that position in the online vote array to the element at the position in the paper vote array. store the result at the corresponding position in the total votes array end for I have been scratching my head for 3 hours now, I have to have this assignment uploaded before midnight to my tutor or I am in the poo Any help really really appreciated. Thanks in advance write a function that when called will ask the user for a series of numbers to be entered 1 at a time and then calculates their sum,their average,and their average rounded up then output the results. for example the average of a series of numbers is found by adding the numbers together and dividing by the amount of numbers entered (so the average of 2,5,1 and 7 is equal to (2+5+1+7)/4=15/4=3.75). Hi, I was hoping you could help me, I was wanting to write text to the screen but without re-writing the whole screen (e.g. document.write();. I wish to take text and put it in a function, modify it, then display it. So far I have: Code: <script type = "text/javascript"> function calculate(text){ var x = "10.0"; var gpa = text.replace(/0.0/g,x); document.getElementById("text").innerText=gpa; } </script> <p id = text >Your Grade Point Average (GPA) is: 0.0</p> <button type="button" onclick="calculate(text)">Calculate</button> Your help would be really appreciated Hi All, I have a problem in which I try to execute a funcition via a document.write() and it throws an "object expected" error. Overall I am making an interface for MS ACCESS .mdb table via ADODB using JavaScript and I want to be able to click on a link and the id is used to delete that entry. Code: My function is: Code: function deleteRecord(del) { var adoConn = new ActiveXObject("ADODB.Connection"); var adoRS = new ActiveXObject("ADODB.Recordset"); adoConn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = {path to }knowBA.mdb'"); adoRS.Open("Select * From know where ID="+ del, adoConn, 1, 3); adoRS.Delete; adoRS.Close(); adoConn.Close(); } The code using the funcition is - oh and the numric KEY is rs(0) : Code: if(!rs.bof) { document.write("<table width='700' border='1' align='center' cellpadding='2' cellspacing='0' bgcolor='#FFFFFF'>"); rs.MoveFirst() while(!rs.eof) { document.write("<tr><td><div align='center'><strong>"+rs(1)+"</strong></div>"); document.write("<strong>Keyword(s):</strong> "+rs(3)); document.write("<br><strong>Entry:</strong> " +rs(2)+" "); document.write("<A HREF='javascript:onClick=("+"eval(deleteRecord(" +rs(0)+"))"+")'>delete</A> "); document.write("</td></tr>"); cnt=cnt+1; rs.MoveNext() } document.write("</table></form>"); } if (cnt==0){ alert ("Sorry, there are no results on that search.");} rs.close() cn.Close(); } </script> Thanks for any hints on how to accomplish this! Hello: I have two input boxes on a form which receive the first and last name of a user. I want to be able to use charAt() to get the first letter in each box and pass it to a third box on the same form. Is this doable? May I request some help? I was thinking something like the function below would be the starting point --I stand correct, as it is not working. Code: <script type=\"text/javascript\"> var str=\"Mossa\"; <!--document.write(str.charAt(0));--> document.write('<INPUT TYPE=text size=2 VALUE=\"str.charAt(0);\">'); var str=\"Barandao\"; document.write('<INPUT TYPE=text VALUE=\"str.charAt(0)\">'); <!--document.write(str.charAt(0));--> </script> Any thoughts! Mossa Hi, New to JS. Have ordered some new books, but need to get somethings going in the mean time. What I wanted to do is to link to a new page having a date range input in the form of 6 text boxes, 2 sets of mm-dd-yy, from and to, where the upon loading the page box 1 of the from would auto focus and then auto tab and then post where php could take over on the server side. Setting up the form and the lay out, no problem. Auto focusing went just like expected using the following code, included because on the next step everything fell apart. [/CODE] <script type="text/javascript" > window.onload=function() { document.getElementById("input1").focus(); } </script> [/CODE] So then the wheels came off and in response, began to simplify what was trying to be done to find where the issues were. As far as I can get working is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" > window.onload=function() { document.getElementById("input1").focus(); } </script> <script type="text/javascript" > function myFunc() { alert("is this working"); } </script> </head> <body> <input id="input1" name="input1" type="text" onkeyup="myFunc()" maxlength="2" value="type a No." /> </body> </html> First issue with this: When I first get to the page everything is just as ordered. The focus is on the text box and the default value is "type a No." When I press a key onkeyup, I bring up the alert box with "is this working" in it. But when I refresh the page with the refresh button, after clicking the "ok" on the alert box, the character that was typed in is still displayed. If I use the link to the page, or the URL from the address bar, then the page reloads properly with the default value, "type a No". Question 1: How do you get the default textbox value using the refresh button as apposed to reloading the page using a link or from the address bar? Using Firefox 8.0 Second and more important at the moment: If I change the script to pass an argument to the function the script crashes. It does not pull up an alert box and freezes. My guess is that I'm doing something wrong on a concept level. NOTE: changed the default value of the text box to " ". Looked like to me there was an issue with the size specification and the default string length as you could only enter in a key stroke by highlighting the text and replacing it Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" > window.onload=function() { document.getElementById("input1").focus(); } </script> <script type="text/javascript" > function myFunc(awe) { alert(awe); } </script> </head> <body> <input id="input1" name="input1" type="text" onkeyup="myFunc("123")" maxlength="2" value="" /> </body> </html> Question 2: can someone straighten me out with this? ok so Code: document.write("Goodbye!"); works but I put ^ that inside a function Code: function SayHello () ( document.write("Goodbye!"); ) and it stops working? I know the function call works because when I place some code to display an image in SayHello function, it displays the image. I am trying to split the (id) values between seperate forms and the submit buttons are not located between the form tags. Note: ->The 3 forms are located at the top of page ->the (3) Submit buttons are in a query and are outside the form tags. ->In this case it does not make sense to have the form duplicating itself in the sql_query. need the correct code for the 3 script functions var form1, form2, form3 then i need the correct function submit code something like -> onClick='Split(this.form1,1)' Also: To keep this simple could the 3 scripts be combined into one? Code: <!-- SPLIT VALUES BETWEEN SEPERATE FORMS --> <script type="text/javascript"> function Add(sel,first) { if (sel.selectedIndex == 0 ) return; var temp = sel.id.split(","); sel.form1["F"+first].value = temp[0]; sel.form1["F"+(first+1)].value = temp[1]; } </script> <script type="text/javascript"> function Edit(sel,first) { if (sel.selectedIndex == 0 ) return; var temp = sel.id.split(","); sel.form2["F"+first].value = temp[0]; sel.form2["F"+(first+1)].value = temp[1]; } </script> <script type="text/javascript"> function Delete(sel,first) { if (sel.selectedIndex == 0 ) return; var temp = sel.id.split(","); sel.form3"F"+first].value = temp[0]; sel.form3["F"+(first+1)].value = temp[1]; } </script> <form method='post' name='form1' action='record_add.php'> <input type='hidden' id='F1' name='t101' value='' > <input type='hidden' id='F2' name='t102' value='' > </form> <form method='post' name='form2' action='record_edit.php'> <input type='hidden' id='F3' name='t103' value='' > <input type='hidden' id='F4' name='t104' value='' > </form> <form method='post' name='form3' action='record_delete.php'> <input type='hidden' id='F5' name='t103' value='' > <input type='hidden' id='F6' name='t106' value='' > </form> <!-- NOTE: THE SUBMIT BUTTONS ARE IN A QUERY OUTSIDE THE FORM TAGS AND NEED TO TARGET THE PROPER FORM1,2,3 onClick --> <button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form1,1)'> <button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form2,3)'> <button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form3,5)'> hi, I am fairly new to jquery and would like som direction on how to complete this menu. I have a list which has 6 bg images which have on and active state images. these are are currenly changing when you hover using the a:hover css. my question is i have a fairly large page and as you scroll down the menu follows the top of the screen but what i would like to happen is when the menu reaches a certain point on the page the menu item that it corrosponds to becomes active (changes to the on state bg image). i have an idea that as you scroll down the page and you get to a certain position on the page you would remove the classes for all of them. use the selecter to select my id and add a special class with that specific bg image on it. the only part i am struggling with is how would i determin how far down the page i am i know theres a function called .position() and you can use position.top. but not sure how i can use that to help me. if you could point me in the direction or just a hint that would be really helpful. thanks in advance I have 4 text boxes that are supposed to load 4 seperate values of data from one field in one table from a database. The field is called interface_cropsettings (from the interface table) and these values have been concatenated and comma seperated in this field. Code: <TR> <TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceXPosition" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD> </TR> <TR> <TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceYPosition" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD> </TR> <TR> <TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceCropHeight" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD> </TR> <TR> <TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceCropWidth" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD> </TR> Once the form is filled out and saved, the data is inserted into the database and the values from these 4 text boxes are concatenated, comma seperated and inserted into that one field correctly. (Example) If the 4 text boxes have the following values: X Position = 12.34 Y Position = 56.78 Crop Height = 250 Crop Width = 500 in the database field they become: 12.34,56.78,250,500 However, if the form is closed and then re-opened, each text box displays the entire database field rather then each value seperated in the corresponding text box. (Example) All 4 text boxes display this: 12.34,56.78,250,500 I already know why the data appears like this in the form, my problem is that I'm not sure how to write the javascript to seperate the values into the correct corresponding fields, assuming javascript is what I should be using! Can anyone help me out with this?? Also, this is kind of irrelevant but just in case you're wondering, this form is part of a cold fusion application! Code: function move_user_img(str) { var step = 25; // change this to different step value switch(str) { case "down": var x = document.getElementById('imageUser').offsetTop; x = x + step; document.getElementById('imageUser').style.top = x + "px"; break; case "up": var x = document.getElementById('imageUser').offsetTop; x = x - step; document.getElementById('imageUser').style.top = x + "px"; break; case "left": var y = document.getElementById('imageUser').offsetLeft; y = y - step; document.getElementById('imageUser').style.left = y + "px"; break; case "right": var y = document.getElementById('imageUser').offsetLeft; y = y + step; document.getElementById('imageUser').style.left = y + "px"; break; } } function move_report_img(str) { var step = 25; // change this to different step value switch(str) { case "down": var x = document.getElementById('imageReport').offsetTop; x = x + step; document.getElementById('imageReport').style.top = x + "px"; break; case "up": var x = document.getElementById('imageReport').offsetTop; x = x - step; document.getElementById('imageReport').style.top = x + "px"; break; case "left": var y = document.getElementById('imageReport').offsetLeft; y = y - step; document.getElementById('imageReport').style.left = y + "px"; break; case "right": var y = document.getElementById('imageReport').offsetLeft; y = y + step; document.getElementById('imageReport').style.left = y + "px"; break; } } Code: <div id ="display" style="width:640px; height:480px; overflow:hidden;"> <div> <img src =" <?php echo UPLOADPATH . $userImage; ?> " style = "position:absolute;" id="imageUser"/> </div> <div id ="imageReport"> <img src = " <?php echo $reportImage; ?> " style = "opacity:0.25;height:700px; width:450px;" /> </div> </div> <div style="position:absolute; top:550px; left:100px;"> <p>Control User Image</p> <input type=button onClick=move_user_img('up') value='Up'> <input type=button onClick=move_user_img('left') value='Left'> <input type=button onClick=move_user_img('right') value='right'> <input type=button onClick=move_user_img('down') value='down'> </div> <div style="position:absolute; top:650px; left:100px;"> <p>Control Report Image</p> <input type=button onClick=move_report_img('up') value='Up'> <input type=button onClick=move_report_img('left') value='Left'> <input type=button onClick=move_report_img('right') value='right'> <input type=button onClick=move_report_img('down') value='down'> </div> 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! 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 this had to do wiht HTML and javascirp thow would you make a function that wirtes somthing in a input box(sorry about messy ness i wasint looking)
how would you make when you press a button it writes somthing in a input box.
hey ppl. i am new here. looks like i will do some Js for years i have a div called "farmacias" inside the content div i want to write something in the div but this is not working document.getElementById("farmacias").innerHTML='ola' anyone knows why? hi everybody,i ve given a task to write a java script calculating a root using bisection method,i've tried to write it on my own but i dont have a clue how to do that .i suppose to find the root using this EQUATION x^7-32=0.i would appreciate any help!
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. |