JavaScript - Can Anybody Give Me Script For Changing Text
Hi, am newbie in this domain ,so i appreciate any help of you. Am making a site for tattoos and i see somewhere an application in Java for changing text, it was simple text box where you write the text you want and down you choose the Font and down you have the text you want in the wanted fond. Thank you!
Similar TutorialsHello, I'm learning javascript and made this little program that takes the price, qty, adds tax and gives you a total. I put in an if statement so that if qty is 0, it becomes 1 then does the calcs. However, if I put in say price 5 and qty 2, qty is changing to false and it doesn't calc. Here it is: http://heresmary.com/test/Bought.html Hello everybody I have a page where I have several input text fields (the number of fields is variable), the input text fields are disable , only the first one is enable, as the user goes filling out the text fields, the next text field becomes available, each time the user fills out an input text field, the form is submitted. As I said, the number of text fields is variable, some times I have only one and other time I can have 7. I would like to create a javaScript function to put the next available text field ready to star writing, without having to click in the text field first. The id of my form is "reports" , the id of the table is,"run_params" and the id of my input texts is "inputp". I am using JSF, the HTML output generated for each field is id="reports:run_params:1:input" , the number 1 indicated that is the first input text, this number can go from 1 to 20. I have tried to create a code where I can read how many input fields I have and then create a loop that checks all of them and search for the field that is enable and empty, and put that field on focus. But so far my code doesn't work. I don't have too much experience with javaScript and I already have tried many different ideas, without success, I have not idea how to achieve this objective, because I don't know very well javascript's capabilities, so I don't know what it is possible and what it is not. Any help????!!! Thanks in advance So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there) Code: <script> var change = new Array change [0] = [0,0,0,0,0]; change [1] = [0,0,0,0,0]; change [2] = ["",0]; change [3] = [0,0,0,0,0]; function equipaa(){ change [0][0] = 1 change [0][4] = 0 change [0][1] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipab(){ change [0][1] = 1 change [0][0] = 0 change [0][4] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipac(){ change [0][2] = 1 change [0][0] = 0 change [0][1] = 0 change [0][4] = 0 change [0][3] = 0 changea(); } function equipad(){ change [0][3] = 1 change [0][0] = 0 change [0][1] = 0 change [0][2] = 0 change [0][4] = 0 changea(); } function equipae(){ change [0][4] = 1 change [0][0] = 0 change [0][1] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipba(){ change [1][0] = 1 change [1][4] = 0 change [1][1] = 0 change [1][2] = 0 change [1][3] = 0 changefinal(); } function equipbb(){ change [1][1] = 1 change [1][0] = 0 change [1][2] = 0 change [1][3] = 0 change [1][4] = 0 changefinal(); } function equipbc(){ change [1][2] = 1 change [1][0] = 0 change [1][1] = 0 change [1][3] = 0 change [1][4] = 0 changefinal(); } function equipbd(){ change [1][3] = 1 change [1][4] = 1 change [1][0] = 0 change [1][1] = 0 change [1][2] = 0 changefinal(); } function equipbe(){ change [1][4] = 1 change [1][0] = 0 change [1][1] = 0 change [1][2] = 0 change [1][3] = 0 changefinal(); } function changea(){ if(change [0] [0] = 1){ change [2] [0] = document.getElementById("is1i").src; change [2] [1] = change [3] [0]; } else if(change [0] [1] = 1){ change [2] [0] = document.getElementById("is2i").src; change [2] [1] = change [3] [1]; } else if(change [0] [2] = 1){ change [2] [0] = document.getElementById("is3i").src; change [2] [1] = change [3] [2]; } else if(change [0] [3] = 1){ change [2] [0] = document.getElementById("is4i").src; change [2] [1] = change [3] [3]; } else if(change [0] [4] = 1){ change [2] [0] = document.getElementById("is5i").src; change [2] [1] = change [3] [4]; } } function changefinal(){ if(change [1] [0] = 1){ document.getElementById("i1").src = change [2] [0]; } else if(change [1] [1] = 1){ document.getElementById("i2").src = change [2] [0]; } else if(change [1] [2] = 1){ document.getElementById("i3").src = change [2] [0]; } else if(change [1] [3] = 1){ document.getElementById("i4").src = change [2] [0]; } else if(change [1] [4] = 1){ document.getElementById("i5").src = change [2] [0]; } clear(); } function clear(){ change [0] [0] = 0; change [0] [1] = 0; change [0] [2] = 0; change [0] [3] = 0; change [0] [4] = 0; change [1] [0] = 0; change [1] [1] = 0; change [1] [2] = 0; change [1] [3] = 0; change [1] [4] = 0; } </script> <html> <body> <table border="0"> <tr> <td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> </tr> </table> <div id="invent"> <table border="o"> <tr> <td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is1n"></div></td> <td><div id="is1d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is2n"></div></td> <td><div id="is2d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is3n"></div></td> <td><div id="is3d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropd()" onclick="equipad();"><img id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is4n"></div></td> <td><div id="is4d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="drope()" onclick="equipae();"><img id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is5n"></div></td> <td><div id="is5d"></div></td> <td></td> </tr> </table> </body> </html> OK, so I'm wanting to set up a lightbox on my company's website. We use a CMS system call phpWebsite. So I place the following script... Code: <script type="text/javascript" src="/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="/jquery.fancybox-1.3.4.css" media="screen" /> <script type = "text/javascript"> function setCookie(isName,isVal) { document.cookie = isName + "=" + isVal + ";expires=" + "path=/"; } function getCookie(isName){ cookieStr = document.cookie; startSlice = cookieStr.indexOf(isName+"="); if (startSlice == -1) {return null;} endSlice = cookieStr.indexOf(";",startSlice+1); if (endSlice == -1){endSlice = cookieStr.length} isData = cookieStr.substring(startSlice,endSlice) isValue = isData.substring(isData.indexOf("=")+1,isData.length); return isValue; } $(document).ready(function() { if ( getCookie('myCookie') != null ) return; // no light box! setCookie('myCookie', 'ANY VALUE'); // for next time $("a#onload").fancybox({ 'frameHeight': 390, 'frameWidth': 640, 'hideOnContentClick': false, 'easingIn': 2000 }).trigger('click'); }); </script> <div style="display: none;" id="lightbox_content"> <div id="data"><img alt="lightbox (188K)" src="./images/filecabinet/folder50/lightbox.jpg" height="330" width="650" border="0"/> </a> </div> </div> <p> <a id="onload" href="#data"> </a></p> Save I save my page, but when I go to the page it brings up that page in the lightbox instead of the image..... So I look at the source and it's changing the last line to this: Code: <p> <a id="onload" href="index.php?module=article&id=206#data"> </a></p> I've tried this multiple times and it keeps doing it. Is there another way to write the last line? I willing to try anything right now. Below is an example if you want to see exactly what I'm talking about example Hi, I'm having a head against wall session and would appricate some help with modifying a google maps script.... I need the orginal script below; Code: //<![CDATA[ $(document).ready(function() { function initialize() { var myLatlng = new google.maps.LatLng(54.2385,-6.9846); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var contentString = '<div id="content">'+ '<h3><? echo $org_name;?></h3>'+ '<div>'+ '<p><a href="#" class="bluelink">Link to profile'+ '#</a></p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 300 }); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: '<? echo $org_name;?>', clickable: false, icon: 'http://google-maps-icons.googlecode.com/files/school.png' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } // Function added to help reset map and container boundaries $("#showMap").click(function() { $("#tab2").css({'display':'block'}); $("#map_canvas").css({'width':'630px', 'height':'400px'}); initialize(); //alert('showMap Clicked!'); }); initialize(); }); changed to Code: //<![CDATA[ var customIcons = { restaurant: { icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' }, bar: { icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' } }; function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(53.943155, -7.437744), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("phpsqlajax_genxml3.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} //]]> In order for the amended code to work I need to include the; // Function added to help reset map and container boundaries $("#showMap").click(function() { $("#tab2").css({'display':'block'}); $("#map_canvas").css({'width':'630px', 'height':'400px'}); initialize(); //alert('showMap Clicked!'); }); initialize(); so that the map will load in a jquery tab... PLEASE HELP ME!!! Hi, I'd like to ask why my script doesn't execute my reg expressions properly. I'm Using Jquery. Scenario: The user can input 2 values, start and end, and the program will attach '@' signs at them. so when the user entered 1 and 10, the script will append the value in a selectbox as "1@-10@". I created a script that counts the latest number of '@' signs. I can get the count but once I execute my regular expression it doesn't match any. Code: // I PASS THE VALUE OF '@' SIGN TO A VARIABLE, LETS TAKE 1 var atSignCount = 1; var tempArr = new Array(); tempArr["3"] = /^\d+\@{numOfAt}\-\d+\@{numOfAt}$/; tempArr["4"] = /^\[\d+\@{numOfAt}\-\d+\@{numOfAt}\][b]$/; tempArr["5"] = /^\[\d+\@{numOfAt}\-\d+\@{numOfAt}\]$/; tempArr["13"] = /^(missing)\d+\@{numOfAt}\-(missing)\d+\@{numOfAt}$/; for (offset in objConvert(['3','4','5','13'])) { // THIS DOES NOT WORK re = tempArr[offset].toString().replace(/numOfAt/g,atSignCount); // THIS WORKS //re = tempArr[offset].toString(); $('#selectbox option').each(function(i) { text = $.trim($(this).val()); if (text.match(re)!=null) { alert('match found'); } }); } function objConvert(a) { var o = {}; for(var i=0;i<a.length;i++) { o[a[i]]=''; } return o; } The script successfully changed the numOfAt and when i print the variable re it displays "/^\d+\@{1}\-\d+\@{1}$/" which should match the "1@-10@" in the selectbox but apparently it doesn't. any idea why? EDIT : So, i found an unsafe? solution to my problem. The problem when i tried converting the "suffix" to the @ sign count, the variable re becomes a string, unlike if i don't replace anything the variable re is an object. I find this out using the typeof command. so i tried converting the string to object using "eval" and yes it's now working but reading around says that eval is unsafe, etc. so any idea how to make string to object safer? I want to change browser setting using Java Script. Any help Please. Thanks in advance. --sohan panwar Hi there, I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links. I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated. In the <head> section i have this: <script type="text/javascript"> img1 = new Image(); img1.src = "images/party/party.jpg"; img2 = new Image(); img2.src = "images/party/icecream.jpg"; img3 = new Image(); img3.src = "images/party/juice.jpg"; img4 = new Image(); img4.src = "images/party/videogames.jpg"; function change(num){ document.images["linkpic"].src = "img" + num } </script> </head> In the <body> i have: That's my default image <table> <tr> <td width="100"> <img src="images/party/balloon1.jpg" name="linkpic"> </td> <td width="260" valign="top" align="left"> <table> <tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr> <tr><td><a href="Party2.html" onmouseover="change('2')">Icecream </a></td></tr> <tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr> <tr><td><a href="Party4.html" onmouseover="change('4')">Video Games </a></td></tr> </table> </tr> </table> </body> I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on. Any hints and help are appreciated! Thanks! I am trying to change text in one cell of a table when a user selects an item from a select menu. The data for the select menu is being pulled from a database (which works fine). The select menu is displayed as expected; however the text in the div tag always comes up as "undefined" The code below is part of a PHP script (thus \" instead of ") I would like to employ a method that does not require extra Javascript in the <head> section as in this instance the code is being output from an include that is called long after the <head> area of the document is processed. Here is what I have Code: <tr><td><select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\"> <option selected=\"selected\" value=\"\">Select Race</option>\n"; $sql = mysql_query("SELECT * FROM races");$i=1; while ($row = mysql_fetch_array($sql)){ $output .= "<option value=\"$i\" ExtraInfo=\"{$row['des']}\">{$row['race']}</option>\n"; $i++; } $output .= "</select></td> <td><div id=\"ExtraInfo\">Select Race</div></td></tr> Any help will be greatly appreciated. I found a solution to my problem: by replacing: Code: <select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\"> with this: Code: <select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')\"> Okay, I have this code, Code: <script type="text/javascript"> function changeText2(){ var userInput = document.getElementById('userInput').value; document.getElementById('boldStuff2').innerHTML = userInput; } </script> <p>Welcome to the site <b id='boldStuff2'>dude</b> </p> <input type='text' id='userInput' value='Enter Text Here' /> <input type='button' onclick='changeText2()' value='Change Text'/> A fairly simple one, and it is great, but I want to change it so that the text you type in stays there! Forever! For example, a person visits the site and types in "Hello" then the option of changing the text again disappears, and every visitor after that sees "Hello" (or whatever the first person types). Is this possible? Can anyone help me out! I'm taking a JavaScript class in school and we are working with forms and summary pages. We were never taught how to change the font color and bgColor when we go to the summary page after an onSubmit. Can anyone fill me in on how it is done?
I'm building a template editor and need some help changing some of the variables. Part 1. Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s I need to be able to fill out two fields to change DEALERNAME and 00/00/00. I found a way to do this but it required the output to be in a field. I need it the output to look no different than before. Part 2. I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3. Head Code: <script language="javascript" type="text/javascript"> function detail1a(){ document.getElementById("detail1").innerHTML = "Up to 5 Quarts"; } function detail1b(){ document.getElementById("detail1").innerHTML = "Synthetic Oil Extra"; } function detail1c(){ document.getElementById("detail1").innerHTML = "Lube Chassis"; } function detail2a(){ document.getElementById("detail2").innerHTML = "Up to 5 Quarts"; } function detail2b(){ document.getElementById("detail2").innerHTML = "Synthetic Oil Extra"; } function detail2c(){ document.getElementById("detail2").innerHTML = "Lube Chassis"; } function detail3a(){ document.getElementById("detail3").innerHTML = "Up to 5 Quarts"; } function detail3b(){ document.getElementById("detail3").innerHTML = "Synthetic Oil Extra"; } function detail3c(){ document.getElementById("detail3").innerHTML = "Lube Chassis"; } </script> Body Code: <span style="font-weight: bold;">Offer Details</span><br /> <p style="margin: 8px 10px"> Detail 1<br /> <input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 2<br /> <input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 3<br /> <input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br /> </p> Output Code: <ul> <li><span id="detail1">Detail 1</span></li> <li><span id="detail2">Detail 2</span></li> <li><span id="detail3">Detail 3</span></li> </ul> I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering. I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is: <script type="text/javascript"> if (document.images) {image0 = new Image; image0.src = "i/p0.png"; image1 = new Image; image1.src = "i/p1.png"; image2 = new Image; image2.src = "i/p2.png"; image3 = new Image; image3.src = "i/p3.png"; image4 = new Image; image4.src = "i/p4.png"; image5 = new Image; image5.src = "i/p5.png"; image6 = new Image; image6.src = "i/p6.png"; }</script> and <img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/> <span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span> <br clear="all"/> <span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/> Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful. Hi all, I hoping somebody can help me. I'm trying to acheive a line of text (with multiple links on each line) that change at set intervals. The code below seems to be working but I can only get working links on the first line that appears. Please can somebody help a gal out? xo [CODE] <html> <head> <title>Rotating Text</title> <script type="text/javascript"> var rotatingTextElement; var rotatingText = new Array(); var ctr = 0; function initRotateText() { rotatingTextElement = document.getElementById("textToChange"); rotatingText[0] = rotatingTextElement.innerHTML; rotatingText[1] = "why won't you work!?!?!?"; rotatingText[2] = "purdy please"; setInterval(rotateText, 5000); } function rotateText() { ctr++; if(ctr >= rotatingText.length) { ctr = 0; } rotatingTextElement.innerHTML = rotatingText[ctr]; } window.onload = initRotateText; </script> </head> <body> <span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span> </body> </html> I am looking for an input text that links to a iframe. . ? To begin, we need some simple HTML elements: A basic form; An Input text that will contain the URLs we want to use; An iFrame that will display the page we select from the input text. Thanks in advance Stickers I work at a college radio station and our brand new website just went live, but we're having one particular issue... We have a set list of shows that air each day, and on the site we have a marquee tag on the homepage that scrolls through showing each show and its broadcast time. Right now we're stuck changing this schedule each day by hand, but it's tough considering we're all college students ourselves and sometimes our own schedules simply don't allow the time. Is there a code that would allow this kind of a daily update to happen automatically? The format for the schedule is such: 4 - 5 pm // "Show 01" 5 - 6 pm // "Show 02" 6 - 8 pm // "Show 03" 8 - 10 pm // "Show 04" 10 - 12 am // "Show 05" Any help would be very much appreciated! Is it possible to dynamically change the value of text on a page as the user types into a text box? E.g. like: You Are Typing: <script> var keyword = document.getElementById('string'); document.write(keyword); </script> Or I could probably insert it into a function and loop it over and over again or is there a better way? Yeah that was a loooong title. Hopefully it's clear enough Right now, my div changes opacity if it's moused over qua the following code: Code: style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30 but this isn't quite optimal, cause if the user mouses out, it changes back to fade, and the user can't quite see what he's entering. So I would like the div to have opacity=1 when one of the textfields in it is active and opacity=0 when it's not. Is there a way to do that? //deafdigit So I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag... Code: <body> <div id="content"> <h1>Convert temperature</h1> <input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;" />From Fahrenheit to Celcius<br /> <input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;" />From Celcius to Fahrenheit<br /> <br /> <label>Degrees Fahrenheit:</label> <input type="text" id="degrees_fahrenheit" class="disabled" /><br /> <label>Degrees Celcius:</label> <input type="text" id="degrees_celcius" class="disabled"/><br /> <br /> <input type="button" id="convert" value="Convert" /><br /> <br /> </div> </body> Hi, The purpose of a function newValue() is to get the value of input text field at the moment the 'roll' button is clicked. It is also necessary to give the value of the the_value variable out of newValue() function. This is to store the value in another variable, so that a moment later it is possible to know what was the value at the time the 'roll' button was clicked. It does not work the way it is at the moment, since always when newValue() function is called, it knows the present value in the text field but not the one at the time of the click. Cookies could do if everyone allows them, so in this case they will not work. Any ideas how to give a value out of the function / (to another function)? [CODE] <script type="text/javascript"> function newValue() { var the_value; the_value = document.the_form.text_name.value; } </script> <form name="the_form" > <input type="text" name="text_name" value="117" size="5" maxlength="3" /> <input type="button" name="button_name" value="roll" onclick="newValue();rollNumbers();" /> </form> [CODE] |