JavaScript - Absolute Noob: Executing A Predefined Function Via Onclick
I'm an experienced programmer (c, perl , python, bash) but absolutely newcomer with Javascript. The code I'm experimenting with is shown below. What I'm trying to do at this point is define a function in a script section in the head of my html page, then call that function in the onclick action of a form button. Sounds trivially simple, but for some reason it isn't doing what I expect.
The eventual result will be that the Javascript will launch a Silverlight video player using the values supplied by the end user, but for now I just want to get the basic buttons to work <code> <html> <head> <title>Silverlight player</title> <script type="text/javascript"> var vProto; var vServer; var vStream; function showMe() { alert("In the function"); vProto = document.getElementById('proto').value; vServer = document.getElementById('server').value; vStream = document.getElementById('stream').value; return false; } function alertMe() { alert(document.getElementById('server').value); return false; } </script> </head> <body> <div id="dataEntry"> <form name="dataForm"> <table align='center'> <tr> <td>Protocol:</td> <td><input type="text" id="proto" title="HTTP, RTSP, MMS"></td> </tr> <tr> <td>Server:</td> <td><input type="text" id="server" width='45'></td> </tr> <tr> <td>Stream:</td> <td><input type="text" id="stream"></td> </tr> <tr> <td colspan='2' align='center'> <input type='button' value='Monitor' onClick="showMe(); return false"> </td> </tr> <tr> <td colspan='2' align='center'> <input type='button' id='alert1' value='Alert!' onClick="alert(document.getElementById('server').value);"> <input type='button' id='alert2' value='Alert!' onClick="alertMe();"> </td> </tr> </table> </form> </div> <div id='report'> <script type="text/javascript"> document.write("Playing Silverlight stream at " + vProto + "://" + vServer + "/" + vStream + "<br />"); </script> </div> </body> </html> </code> So, what embarrassing simple thing did I leave out? Similar Tutorialsi have this line in my code: PHP Code: echo '<a href="" onClick="yesnolist()">Free Chat</a>'; then at the top i have: Code: <? php //have some php here ?> <div class="innerContainer"> <head> <script type="text/JavaScript"> function yesnolist(val) { alert("lakjsd"); var e = confirm('Do you want to send a free chat request?'); if (e == true) { window.location.href = "http://www-rainbowcode-mobi/confirmfreechat.php"; window.location('http://www-rainbowcode-mobi/confirmfreechat.php'); return true; } else return false; } </script> </head> <span class="headings2">CONTACTS</span> //and more code after this echo '<a href="" onClick="yesnolist()">Free Chat</a>'; why is it not doing my onClick()?? please help? thanks I have created a lightbox for user display on my site. The lightbox is triggered by an onclick link. Works great but I would like to make one switch to it. I would like the lightbox to appear position:fixed; top:10px; onclick. Then if the user scrolls I would like the lightbox to appear position:absolute; top:10px; You can see an example of this here on ESPN's website http://search.espn.go.com/first-take/videos/6. If you click any video it appears position fixed onclick but then position absolute on scroll. This is what I have so far. It shows it all position fixed onclick as I desire, but stays that way on scroll. PHP Code: <a href = "javascript:void(0)" onclick = "document.getElementById('light<?php echo $count;?>').style.display='block'; document.getElementById('light<?php echo $count;?>').style.position = 'fixed'; document.getElementById('light<?php echo $count;?>').style.top = '10px'; document.getElementById('fade<?php echo $count;?>').style.display='block'"> ... [link] ... </a> PHP Code: <div id="light<?php echo $count;?>" class="log-lightbox-content-wrapper"> ... [lightbox content] ... </div> PHP Code: <style> .log-lightbox-content-wrapper {display: none; position:absolute; top: -45px; left: 50%; margin-left: -456px; width: 900px; padding: 16px;background-color: white;z-index:1002; overflow: auto; border-color:#666; border-radius:5px; border-style:solid; border-width:5px; min-height:600px; height: auto !important; height:600px;} </style> Progress: http://instride.info/admin - Click tab that says log - Then click any log post to view light box Hi! I'm trying to run this script on Firefox. I'm copying and pasting the whole thing in here just to be safe, but I'm mostly concerned with getting the findLegendary function to call catchPok(). The script executes fine, goes into the battle, but then...does nothing. It runs the catchPok function if I manually click and deselect the "Find Legendary" window option, so alternately, if somebody knows how to make the program automatically click the element at that point to stop repeating the function (maybe?) and it works, I'd be just as happy with that. My best guess is that the autoContinue function might be interfering somehow, since it runs that portion of the code with the manual findLegendary shutoff, but to be honest I'm pretty clueless. What I want it to do is run the catch function through, catch the game pixel, and then go back to repeating. I don't care how this is accomplished as long as it can feasibly loop. The game rules allow botting, so this isn't against any site rules, either. Any and all help/advice is much appreciated! Code: // ==UserScript== // @name Pokemon Vortex Tool // @namespace vortexrising.tk // @include http://*pokemonvortex.org/* // @exclude http://*pokemonvortex.org/adv.php* // ==/UserScript== var legends = [ // Custom // Grass 'Shaymin (Sky)', 'Celebi', 'Latios', 'Latias', 'Rayquaza', 'Shaymin', 'Mew', 'Cresselia', 'Azelf', 'Uxie', 'Mesprit', 'Virizion', 'Genesect', // Grass (water) 'Manaphy', 'Phione', 'Suicune', 'Keldeo', // Ice 'Articuno', 'Suicune', 'Lugia', 'Regice', 'Kyurem', // Cave (land) 'Groudon', 'Arceus', 'Regigigas', 'Palkia', 'Dialga', 'Deoxys', 'Jirachi', 'Registeel', 'Regirock', 'Mewtwo', 'Cobalion', 'Terrakion', 'Virizion', 'Reshiram', 'Zekrom', 'Kyurem', 'Genesect', 'Tornadus', 'Landorus', // Cave (water) 'Kyogre', 'Lugia', 'Keldeo', // Ghost 'Mew', 'Giratina', 'Rotom', 'Mesprit', 'Azelf', 'Uxie', 'Celebi', 'Darkrown', 'Darkrai', // Electric 'Zapdos', 'Raikou', 'Jirachi', 'Darkrai', 'Darkrown', 'Thundurus', 'Zekrom', 'Genesect', // Fire 'Heatran', 'Ho-oh', 'Moltres', 'Entei', 'Reshiram', 'Victini' ]; var settings = { 'keys': ['autoBattle', 'findRare', 'findLegendary','catchPok','findNewpoke'], 'data': {}, 'save': function() { for (var i = 0; i < this.keys.length; i++) { GM_setValue(this.keys[i], this.data[this.keys[i]]); } }, 'load': function() { for (var i = 0; i < this.keys.length; i++) { this.data[this.keys[i]] = GM_getValue(this.keys[i], false); } } }; var movPos = 0; function moveAround() { movPos += 10; if (movPos > 360) { movPos = 0; } var xpos = parseInt(Math.sin(movPos * (Math.PI / 180))*10); var ypos = parseInt(Math.cos(movPos * (Math.PI / 180))*10); unsafeWindow.PlayRequest(xpos + 14, ypos + 14, parseInt(Math.random()*8)+1); /* var btnArrow = unsafeWindow.document.querySelector('#arrows img[onclick]') if (btnArrow) { btnArrow.click(); } else { unsafeWindow.console.info('No buttons?'); }*/ } function catchPok() { try { var btnPo = unsafeWindow.document.querySelector('#battleForm input[type="submit"][value="Continue"]'); if (btnPo) { btnPo.click(); } var radMaster = unsafeWindow.document.querySelector('#itemForm input[type="radio"][value="Master Ball"]'); if (radMaster) { radMaster.click(); } var btnItem = unsafeWindow.document.querySelector('#itemForm input[type="submit"][value="Use Item"]'); if (btnItem) { btnItem.click(); } var btnCont2 = unsafeWindow.document.querySelector('#battleForm input[type="submit"][value="Continue!"]'); if (btnCont2) { btnCont2.click(); } var linkReturnToMap = unsafeWindow.document.querySelector('.optionsList a'); if (linkReturnToMap && linkReturnToMap.textContent.trim() == 'Return to the Map') { settings.data.nextBattle = new Date().getTime() + 10000; unsafeWindow.location.href = linkReturnToMap.href; } }catch (e) { unsafeWindow.console.warn('Exception: ', e); } } function findNewpoke() { var aPoke = unsafeWindow.document.querySelector('#appear p'); var oldPoke = unsafeWindow.document.querySelector('#appear strong'); var searchPoke = unsafeWindow.document.querySelector('#alert p') if (!aPoke) { moveAround(); return; } else if (oldPoke) { moveAround(); return; } else if (searchPoke) { moveAround(); return; } else { var btnDo = unsafeWindow.document.querySelector('input[type="submit"][value="Battle!"]'); if (btnDo) { btnDo.click(); } catchPok(); return; } } function findLegendary() { var wildText = unsafeWindow.document.querySelector('#appear p'); if (!wildText) { moveAround(); return; } wildText = wildText.textContent.trim(); for (var i = 0; i < legends.length; i++) { if (wildText.match(legends[i])) { var btnDo = unsafeWindow.document.querySelector('input[type="submit"][value="Battle!"]'); if (btnDo) { btnDo.click(); } catchPok(); return; } } moveAround(); } function findRare() { var wildText = unsafeWindow.document.querySelector('#appear p'); if (!wildText) { moveAround(); return; } wildText = wildText.textContent.trim(); if (!wildText.match(/Wild (Shiny|Shaymin (Sky)|Celebi|Latios|Latias|Rayquaza|Shaymin|Mew|Cresselia|Azelf|Uxie|Mesprit|Virizion|Genesect|Manaphy|Phione|Suicune|Keldeo|Articuno|Lugia|Regice|Kyurem|Groudon|Arceus|Regigigas|Palkia|Dialga|Deoxys|Jirachi|Registeel|Regirock|Mewtwo|Cobalion|Terrakion|Reshiram|Zekrom|Tornadus|Landorus|Kyogre|Giratina|Rotom|Zapdos|Raikou|Darkrai|Darkrown|Thundurus|Heatran|Ho-oh|Moltres|Entei|Victini)/)) { moveAround(); return; } unsafeWindow.console.info('Rare found ', wildText); } function autoBattle() { try { var btnContinue = unsafeWindow.document.querySelector('#battleForm input[type="submit"][value="Continue"]'); if (btnContinue) { btnContinue.click(); } var btnContinue2 = unsafeWindow.document.querySelector('#battleForm input[type="submit"][value="Continue!"]'); if (btnContinue2) { btnContinue2.click(); } var btnAttack = unsafeWindow.document.querySelector('#battleForm input[type="submit"][value="Attack!"]'); if (btnAttack) { btnAttack.click(); } var linkReturnToMap = unsafeWindow.document.querySelector('.optionsList a'); if (linkReturnToMap && linkReturnToMap.textContent.trim() == 'Return to the Map') { settings.data.nextBattle = new Date().getTime() + 10000; unsafeWindow.location.href = linkReturnToMap.href; } // check for battle button var btnBattle = unsafeWindow.document.querySelector('#appear form input[type="submit"][value="Battle!"]'); var linkRebattle = unsafeWindow.document.querySelector('.optionsList a'); if (btnBattle) { // wait until 10 seconds since last battle //var delay = GM_getValue('lastBattle'); window.setTimeout(function() { btnBattle.click(); }, 10000); } else if (linkRebattle && linkRebattle.textContent.trim() == 'Rebattle Opponent') { window.setTimeout(function() { unsafeWindow.location.href = linkRebattle.href; }, 10000); } else { // if not found, click a direction var btnArrow = unsafeWindow.document.querySelector('#arrows img[onclick]') console.info('arrow', btnArrow); if (btnArrow) { btnArrow.click(); } } } catch (e) { unsafeWindow.console.warn('Exception: ', e); } } function autoContinue() { if (settings.data.findRare) { findRare(); } if (settings.data.autoBattle) { autoBattle(); } if (settings.data.findLegendary) { findLegendary(); } if (settings.data.catchPok) { catchPok(); } if (settings.data.findNewpoke) { findNewpoke(); } } unsafeWindow.AjaxRequest = function () { if (!this.xmlhttp) { try { // Try to create object for Firefox, Safari, IE7, etc. this.xmlhttp = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.xmlhttp = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } this.method = 'post'; this.async = true; this.url; this.query = ''; this.data = ''; this.reponseText; this.reponseXML; this.responseHandler; this.abortHandler; this.showLoading = false; this.send = function () { if (this.method && this.url) { var self = this; this.xmlhttp.onreadystatechange = function () { if (self.xmlhttp.readyState == 4) { if (self.xmlhttp.status && (self.xmlhttp.status == 200 || self.xmlhttp.status == 304)) { //unsafeWindow.console.info('success', self); self.responseText = self.xmlhttp.responseText; if (self.xmlhttp.responseXML) { self.responseXML = self.xmlhttp.responseXML; } else { self.responseXML = null; } if (self.responseHandler) { self.responseHandler(); var evt = document.createEvent('Event'); evt.initEvent('gm:ajaxhook', false, true); document.dispatchEvent(evt); //autoContinue(); } } else { showAlert('<p>An error occured while requesting the data.</p><p>Status Msg: ' + self.xmlhttp.statusText + '</p><p><input type="button" name="ok" value="OK" onclick="removeAlert();" id="alertFocus"></p>'); } if (self.showLoading && self.loading) { self.loading.style.visibility = 'hidden'; } } } if (this.showLoading) { this.displayLoading(); } this.xmlhttp.open(this.method, this.url + '?' + encodeURI(this.query), this.async); if (this.method == 'post') { this.xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } this.xmlhttp.send(encodeURI(this.data)); } else { showAlert("<p>An error occured while requesting the data.</p><p>No method, URL, and/or query string provided.</p><p><input type=\"button\" name=\"ok\" value=\"OK\" onclick=\"removeAlert();\" id=\"alertFocus\"></p>"); } } this.abort = function () { this.xmlhttp.onreadystatechange = function () {}; this.xmlhttp.abort(); if (this.abortHandler) { this.abortHandler(); } } this.getFormValues = function (form) { for (i = 0; i < form.elements.length; i++) { switch (form.elements[i].type) { case 'text': case 'hidden': case 'password': case 'textarea': this.data += form.elements[i].name + "=" + form.elements[i].value + "&"; break; case 'checkbox': case 'radio': if (form.elements[i].checked) this.data += form.elements[i].name + "=" + form.elements[i].value + "&"; break; case 'select-one': this.data += form.elements[i].name + "=" + form.elements[i].options[form.elements[i].selectedIndex].value + "&"; break; } } this.data = this.data.substr(0, (this.data.length - 1)); } this.appendHTML = function (object, flag) { if (this.xmlhttp.responseText) { if (flag) { object.innerHTML = this.responseText; } else { object.innerHTML += this.responseText; } } else {} } this.displayLoading = function () { if (this.showLoading == 'sidebar') { this.loading = document.getElementById('sidebarLoading'); this.loading.style.height = document.getElementById('sidebar').offsetHeight - 2 + 'px'; this.loading.style.width = document.getElementById('sidebarContent').offsetWidth + 'px'; this.loading.innerHTML = '<p style="text-align: center; margin-top: 150px;"><img src="http://static.pokemonvortex.org/images/loading.gif" width="100" height="100" alt="Loading..." /></p>'; } else if (this.showLoading == 'message') // message { this.loading = document.getElementById('messageContent'); this.loading.style.height = document.getElementById('message').offsetHeight + 'px'; this.loading.style.width = document.getElementById('message').offsetWidth + 'px'; this.loading.innerHTML = '<p style="text-align: center; margin-top: 75px;"><img src="http://static.pokemonvortex.org/images/loading.gif" width="100" height="100" alt="Loading..." /></p>'; } else if (this.showLoading == 'messageList') // message list { this.loading = document.getElementById('messageList'); this.loading.style.height = document.getElementById('messageList').offsetHeight + 'px'; this.loading.style.width = document.getElementById('messageList').offsetWidth + 'px'; this.loading.innerHTML = '<p style="text-align: center; margin-top: 50px;"><img src="http://static.pokemonvortex.org/images/loading.gif" width="100" height="100" alt="Loading..." /></p>'; } else if (this.showLoading == 'map') // map { this.loading = document.getElementById('mapLoading') this.loading.innerHTML = '<p style="text-align: center; margin-top: 150px;"><img src="http://static.pokemonvortex.org/images/loading_white.gif" width="100" height="100" alt="Loading..." /></p>'; } else if (this.showLoading == 'live') { this.loading = document.getElementById('loading'); this.loading.style.height = document.getElementById('scroll').offsetHeight + 'px'; if (document.getElementById('scrollContent')) { this.loading.style.width = document.getElementById('scrollContent').offsetWidth + 'px'; } else { this.loading.style.width = document.getElementById('scroll').offsetWidth + 'px'; } this.loading.innerHTML = '<p class="large" style="margin-top: 75px; text-align: center;"><strong>Waiting for the other user to respond...</strong></p><p style="text-align: center;">You have been waiting <span id="waitTime">0 seconds</span>.</p>'; waitTime(0); } else // main { this.loading = document.getElementById('loading'); this.loading.style.height = document.getElementById('scroll').offsetHeight + 'px'; if (document.getElementById('scrollContent')) { this.loading.style.width = document.getElementById('scrollContent').offsetWidth + 'px'; } else { this.loading.style.width = document.getElementById('scroll').offsetWidth + 'px'; } this.loading.innerHTML = '<p style="text-align: center; margin-top: 150px;"><img src="http://static.pokemonvortex.org/images/loading.gif" width="100" height="100" alt="Loading..." /></p>'; } this.loading.style.visibility = 'visible'; } } function createToggler(container, title, varname) { var toggleEnable = unsafeWindow.document.createElement('p'); container.appendChild(toggleEnable); toggleEnable.innerHTML = title + ' <b>' + (settings.data[varname] ? 'Enabled' : 'Disabled') + '</b>'; toggleEnable.addEventListener('click', function() { settings.data[varname] = !settings.data[varname]; toggleEnable.innerHTML = title + ' <b>' + (settings.data[varname] ? 'Enabled' : 'Disabled') + '</b>'; settings.save(); autoContinue(); }, false); } function init() { var iframes = unsafeWindow.document.getElementsByTagName('iframe'); for (var i = 0; i < iframes.length; i++) { iframes[i].parentNode.removeChild(iframes[i]); } var sty = unsafeWindow.document.createElement('style'); unsafeWindow.document.querySelector('head').appendChild(sty); sty.textContent = '#fscctrl { background: green; border: 1px solid yellow; cursor:pointer; margin: auto; padding: 10px; width: 1010px; } #fscctrl p { margin: 0; } #alert{position:absolute; z-index: 1; background:#ffc; padding: 0 10px; right: 0; width: 100px;} #alert p { margin: 0; } #loading {z-index: 0; top: 0; height: 200px;} #loading p {margin-top:0 !important;} #header{ height: 70px; }'; unsafeWindow.disableSubmitButton = function(form) { for (i = 0; i < form.elements.length; i++) { if (form.elements[i].type == 'submit') { form.elements[i].value = 'Please Wait... or click again - by rockingdo'; } } return true; } settings.load(); document.addEventListener('gm:ajaxhook', function() { autoContinue(); }, false); var container = unsafeWindow.document.createElement('div'); unsafeWindow.document.body.insertBefore(container, unsafeWindow.document.body.firstChild); container.setAttribute('id', 'fscctrl'); createToggler(container, 'Auto-battle', 'autoBattle'); createToggler(container, 'Find Rare', 'findRare'); createToggler(container, 'Find Legendary', 'findLegendary'); createToggler(container, 'Catch Pokemon', 'catchPok'); createToggler(container, 'Find New Pokemon', 'findNewpoke'); autoContinue(); } init(); I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. hi there i'm a newb so be nice lol --> I want to use javascript in an array to submit content. I have some php background so using some techniques I worked this out. >> I need to select bathroom details and the script needs to be user friendly, however I have multiple bathrooms that can be selected. So based on a drop down list I need to select the bathrooms needed and then I will get more options as stated below. These options will need to be submitted so I need different varibles for each item selected I expect that you'll have a better way to do it I just want it to work my HTML script LOOKED as follows Code: <!-- BATHROOM TYPE SELECTOR HTML--> <label> <input name="fullbathr" type="checkbox" value="fullbathr" onClick="checker('yesFullba'); UpdateChecks('option');" /> Full Bathroom </label> <span id="yesFullba" style="visibility:visible"> | <input name="babath" type="checkbox" value="babath" id="babath" onClick="change('bathselba'); UpdateChecks('option');";/> Bath </label> | <input name="bashower" type="checkbox" value="bashower" id="bashower" onClick="change('showerselba'); UpdateChecks('option');" /> Shower </label> <span id="bathselba" style="visibility:hidden"> <br /> Bath Type: <label> <input type="radio" name="bathtype" value="standardba" id="bathtype_0" /> Standard</label> <label> <input type="radio" name="bathtype" value="ovalba" id="bathtype_1" /> | Oval</label> <label> <input type="radio" name="bathtype" value="cornerba" id="bathtype_2" /> | Corner</label> <label> <input type="radio" name="bathtype" value="spaba" id="bathtype_3" /> | Spa</label> </span> <span id="showerselba" style="visibility:hidden"> <br /> Shower Heads: <label> <input type="radio" name="showerheadba" value="singlesho" id="showerheadba_0" /> Single Head</label> <label> <input type="radio" name="showerheadba" value="doublesho" id="showerheadba_1" /> | Double Head</label> </span> </span> <br /> <!-- end BATHROOM TYPE SELECTOR HTML --> i converted it as follows Code: <!-- CREATE BATHROOMS --> function createbaths(number2) { databaths = ""; inter = "'"; dinter = '"'; spaces=" "; if (number2 < 7 && number2 > -1) { for (i=1; i <= number2; i++) { databaths = databaths + "<br><strong>Bathroom " + i + " :</strong><br>" <!-- BATHROOM TYPE SELECTOR JAVASCRIPT--> + " <label>" + " <input name=" + dinter + "fullbathr" + dinter + " type=" + dinter + "checkbox" + dinter + " value=" + dinter + "fullbathr" + dinter + " onClick=" + dinter + "checker(" + inter + "yesFullba" + inter + "); " + "UpdateChecks(" + inter + "option" + inter + ");" + dinter + " />" + "Full Bathroom </label>" + "<span id=" + dinter + "yesFullba" + dinter + " style=" + dinter + "visibility:visible" + dinter + "> | " + "<input name=" + dinter + "babath" + dinter + " type=" + dinter + "checkbox" + dinter + " value=" + dinter + "babath" + dinter + " id=" + dinter + "babath" + dinter + " onClick=" + dinter + "change(" + inter + "bathselba" + inter + "); " + "UpdateChecks(" + inter + "option" + inter + ");" + dinter + ";/>" + "Bath </label> | " + "<input name=" + dinter + "bashower" + dinter + " type=" + dinter + "checkbox" + dinter + " value=" + dinter + "bashower" + dinter + " id=" + dinter + "bashower" + dinter + " onClick=" + dinter + "change(" + inter + "showerselba" + inter + "); " + "UpdateChecks(" + inter + "option" + inter + ");" + dinter + " />" + "Shower </label> " + "<span id=" + dinter + "bathselba" + dinter + " style=" + dinter + "visibility:hidden" + dinter + ">" + "<br />" + "Bath Type: <label>" + "<input type=" + dinter + "radio" + dinter + " name=" + dinter + "bathtype" + dinter + " value=" + dinter + "standardba" + dinter + " id=" + dinter + "bathtype_0" + dinter + " /> " + "Standard</label>" + "<label>" + "<input type=" + dinter + "radio" + dinter + " name=" + dinter + "bathtype" + dinter + " value=" + dinter + "ovalba" + dinter + " id=" + dinter + "bathtype_1" + dinter + " /> | " + "Oval</label>" + "<label>" + "<input type=" + dinter + "radio" + dinter + " name=" + dinter + "bathtype" + dinter + " value=" + dinter + "cornerba" + dinter + " id=" + dinter + "bathtype_2" + dinter + " /> | " + "Corner</label>" + "<label>" + "<input type=" + dinter + "radio" + dinter + " name="+ dinter + "bathtype" + dinter + " value=" + dinter + "spaba" + dinter + " id=" + dinter + "bathtype_3" + dinter + " /> | " + "Spa</label></span>" + " <span id=" + dinter + "showerselba" + dinter + " style=" + dinter + "visibility:hidden" + dinter + "><br />" + " Shower Heads: <label>" + "<input type=" + dinter + "radio" + dinter + " name=" + dinter + "showerheadba" + dinter + " value=" + dinter + "singlesho" + dinter + " id=" + dinter + "showerheadba_0" + dinter + " />" + "Single Head</label>" + "<label>" + "<input type=" + dinter + "radio" + dinter + " name=" + dinter + "showerheadba" + dinter + " value=" + dinter + "doublesho" + dinter + " id=" + dinter + "showerheadba_1" + dinter + " /> | " + "Double Head</label>" + " </span> </span> <br /> " <!-- end BATHROOM TYPE SELECTOR JAVASCRIPT --> The entire forum is using a few different functions I've setup for this section i've got these sets Code: <!-- --> function change(id){ if (document.all[ id ].style.visibility == 'hidden') { document.all[ id ].style.visibility = 'visible'; document.all[ id ].focus(); } else { document.all[ id ].style.visibility = 'hidden'; document.all[ id ].value = ''; document.all[ id ].checked = ''; } } <!-- --> <!-- for full bathroom selector--> function UpdateChecks(which) { if (which == 'fullBathroom') { fullBathroomIsChecked(); } else if(which == 'option') { BoxesCheck(); } } function fullBathroomIsChecked() { if(document.all.fullbathr.checked == false) { BoxesCheck(); } else { document.all.babath.checked = false; document.all.bashower.checked = false; } } function BoxesCheck() { document.all.fullbathr.checked = false; if((document.all.babath.checked == true) && (document.all.bashower.checked == true)) { document.all.fullbathr.checked = true; document.all.yesFullba.style.visibility = 'hidden'; fullBathroomIsChecked(); } } <!-- for full bathroom selector END --> CURRENTLY I have a drop down list from 1 to 6 when a bathroom is selected lets say 3 then it SHOULD display full - bath - shower - PER EACH BATHROOM if bath and shower is selected they disappear and full remains ticked if u tick full bath and shower disappear. included a sub cat. that changes based on the above selection this works in html but The bathroom varibles in the javascript need to be changed to suite a changing varible I based what I understand that an array will need to be added but how to i adjust the script correctly. I might work it out just have a bit of overload at the moment. Thanks in advance i have an image with an onclick function and parameters 0,1 i want to change the parameters of the onclick function through the same function? Code: <img id="down0" onclick=swap(0,1) /> <javascript> function swap(a,b){ var imgda=document.getElementById('down'+a); imgda.onclick = swap(b,b+1); } </javascript> normally it should change the onclick to swap(1,2) but it remains 0,1 whats happening?? p.s. plz dont tell me about the javascript tag, its just for quick explaining... Hi guys. I have made a PHP script that queries a database and uses the reponse to display multiple radio boxes (using a while loop). What I would like to do is have the page URI updated when a radiobox is clicked, without the user having to press on a "Submit" button or something. This is where Javascript comes into play. As this is a while loop, there is no specific number of responses or prefixed names. I've found a lot of stuff on Google with functions calling ID's, and then if the ID matches do a predefined response. Of course that wouldn't work in this situation, and to be frank I don't need anything near as complex. What I'm looking to do is call a Javascript function to redirect the page to "...?location=<get location from PHP var>&id=<get ID from checkbox ID/name>". When the page reloads, I can then use the PHP $_GET["id"] function to display data. It sounds SO simple in theory! Can anyone help? What i've done (and failed): Code: echo "<form>"; while ($explode_count_dec > "0"): $while_query = mysql_query("SELECT * FROM printers WHERE ID LIKE '$explodedata[$explode_number]'"); $while_result = mysql_fetch_assoc($while_query); echo "<input type='radio' value='".$explodedata[$explode_number]."' name='printer' onClick='showmore(".$explode_number.")' />".$while_result["Model"]." <BR /> "; ++$explode_number; --$explode_count_dec; endwhile; echo "</form>"; and the JS: Code: <script type="text/javascript"> function showmore($text) { var room = "<?= $get_location; ?>"; window.location = "?location=" + room + "&id=" + <?php $text; ?> // Couldn't do just $text here? I wish I knew JS.. } </script> I guess it is because it is 2am and had a few beers but i cannot get this to work and i know its pretty simple to do - see the code below: Code: {if ""|fn_needs_image_verification == true} {assign var="is" value="Image_verification"|fn_get_settings} <p{if $align} class="{$align}"{/if}>{$lang.image_verification_body}</p> {assign var="id_uniqid" value=$id|uniqid} {literal} <script language="javascript" type="text/javascript"> function reloadCaptcha() { captcha = document.getElementById("captureURLID").src; return captcha += 'reload'; } </script> {/literal} {if $sidebox} <p><img id="verification_image_{$id}" class="image-captcha valign" src="{"image.captcha?verification_id=`$SESS_ID`:`$id`&`$id_uniqid`&"|fn_url:'C':'rel':'&'}" alt="" onclick="this.src += 'reload' ;" width="{$is.width}" height="{$is.height}" /></p> {/if} <p><input class="captcha-input-text valign" type="text" name="verification_answer" value= "" autocomplete="off" /> {if !$sidebox} <img id="verification_image_{$id} captureURLID" class="image-captcha valign" src="{"image.captcha?verification_id=`$SESS_ID`:`$id`&`$id_uniqid`&"|fn_url:'C':'rel':'&'}" alt="" onclick="this.src += 'reload' ;" width="{$is.width}" height="{$is.height}" /> {/if} <img src="{$images_dir}/icons/icon_reload.png" height="25" width="25" alt="Reload Captcha Image" onclick="reloadCaptcha();" class="valign image-captcha" /></p> {/if} now the following works totally fine, when you click the captcha code changes..... "onclick="this.src += 'reload'" you will notice i have added a custom reload button image below this with a onclick calling a custom function "reloadCaptcha(); which i want to reload the captcha image above it - however it is not working, i have done the function so it grabs the src from the element ID, i have added 2 ID's to the IMG but cannot remember if you can have multiple IDs or not which if not could be causing the problem but not 100% sure how to include the smarty code for the generated ID on that image. Any ideas on the code above from having a quick glimps? as the code stands i get the error: Error: captureURL is null Many Thanks I am creating a weather widget for the iphone. The program creates an xml request for a weather feed and then parses the response. Depending on the response different information is displayed. A different icon for each weather pattern. I have all of this working so far. What I want to integrate is the option to refresh the weather when a user taps on the icon. Here is my code: Code: document.getElementByID("weatherIcon").innerHTML="<img src=\"Icon Sets/"+iconSet+"/"+MiniIcons[obj.icon]+iconExt/" border=2 onclick=\"refresh();\">" Code: function refresh() { weatherRefresherTemp(); } I know that the function refresh works because it is called from another function that allows the refresh to happen automatically every 30 min. However, wanting to integrate an option to manually refresh I am trying to do it this way. The code never seems to fire, nothing happens. I've added the border option for testing and don't even see that. I've been using a javascript editor and I do not get any errors. Any suggestions would be greatly apprectiated. I'm having a small issue with being able to use the onclick more than once. When I load the page and click the link the request works fine the first time. But if I cancel the request then goto click the link again, nothing happens. Code: <a href="javascript:void();" onclick="sendRequest()">Send the request</a> <script> var request = { method: 'postrequest', message: 'You will like it', data: '123key' }; function sendRequest() { postReq(request, function (a) { if (a && a.post_id) { //Do something if sent } else { //Do something if cancelled } }) } </script> I have an external js file which contains the function which for now opens an alert box. The div on the page should run the function when it is clicked but it isn't. I have tried changing the function to an alert to check the click event is working and i have tried running the javascript in the address bar Code: javascript:hasFocus(); to ensure it has loaded correctly. Both are working fine and i am getting no errors. Below is a snippet of the code: Code: function hasFocus() { alert("a"); } Code: <!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> <script type="text/javascript" language="javascript" src="scripts/cms.js"></script> </head> <body> <div id="tab_panel"> <div id="tabs"></div> <div id="content" contenteditable="true" onclick="hasFocus();"></div> </div> </body> </html> Thanks in advance The following coding works in Konqueror 3.5.10 on Ubuntu 8.04.3 LTS but not on Firefox 3.0.10 Linux/3.5.7 XP, Opera 10.10 Linux or IE8 XP. I can't see why but it may be to do with the recursion (showtable calls onclick calls addit which calls showtable ...). Somehow it is not seeing the addit routine the second time round. It is meant just to add a line. Eventually it needs to be a complex table but this is for illustration. There are other ways to solve this but this would be the simplest - if it worked! What happens is that one line is added OK but then it chokes. This is what makes me think it is the recursion but I can't see otherwise how to make it write the updated text. I realise I should have a document.close() in it as well and I have tried adding <![CDATA[ ... ]]> as well. Other than in Konqueror, it gives an error message saying object not found (in IE8) or more explicitly: Code: function onclick(event){ addit(4); } with 'addit is not defined' in Firebug. In Konqueror it works sweetly. Code: <!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' xml:lang='en' lang='en'> <head> <script language='Javascript' type='text/javascript'> if(typeof(sections) == 'undefined'){ var sections=['Text 0','Text 1','Text 2']; } function addit(ilocal){ sections.splice(sections.length,0,'Text '+ilocal); showtable(); } function showtable(){ var i,j,ip1; for(i=0;i<sections.length;i++){ ip1=i+1; document.write('Section ',i,': ',sections[i],'<br>'); } document.write("<input type='button' value='Add' onClick='addit(",ip1,")' /><br>"); for(j=0;j<sections.length;j++){document.write(sections[j]," ");} } </script> </head><body> <script language='Javascript' type='text/javascript'> showtable(); </script> </body> </html> Clues would be very much appreciated - my baldness coefficient is increasing daily! I've been doing some searching and I can't seem to find what I am looking for. I hope someone can help. I am trying to target a link to an iframe window. The catch is that I need to use an onClick function in a TD tag... Here is an example: <TABLE HEIGHT="40" WIDTH="780" CELLSPACING="0" CELLPADDING="0" BORDER="1"> <TBODY> <TR> <TD ALIGN="CENTER">HEADER 1</TD> </TR> <TR> <TD OnClick="location='http://www.ophil.com'" BGCOLOR="#FFFFFF">Ophil</TD> </TR> </TBODY> </TABLE> </TD> </TR> <table width="100%" border="0" cellspacing="0" cellpadding="1"> <tr> <td><a name="bidframe"> <IFRAME SRC="bid_item_instructions.html" TITLE="IFRAME" SCROLLING="no" NAME="bidpage" WIDTH="100%" HEIGHT="450" ALIGN="center" FRAMEBORDER="yes" > </IFRAME> </a></td> </tr> </table> </CENTER> </BODY> </HTML> I need the results of that onclick to appear in the iframe window I have called bidframe... Any ideas? This is hopefully a simple fix and I hope someone can help me out, I'm pretty new at coding. I have a form on an html page and I want to make it so when a button is clicked, it adds one to the input to the right of it, and when a button to the right of the input is clicked, it will delete one to the left of that button. I don't want to resort to making a new function for each and every form, because there will be a lot. Here is the form and input parts: Code: <form name="calculate"> <input type="button" onClick="add()" /> <input name="result" type="input" readonly="readonly" value="0" /> <input type="button" onclick="sub()" /> </form> Here is what the function code looks like: Code: function add() { var add = 1 * calculate.name.value; add = add + 1; calculate.name.value = add; } function sub() { var add = 1 * calculate.name.value; add = add - 1; calculate.name.value = add; } Note: where I called the calculate.name.value, that obviously doesn't work, and I need some way, rather than making multiple functions and changing the name part, to be able to call to a name near the button, if at all possible. Any and all ideas are appreciated, Thanks! Hi, I want to call a javascript function without having a button click and it is nestled within php. I have the function OpenChat() in my main page - this works fine. I have the below sub page that is called by an onclick event (originally I had the script launch through a button but I am over loading my server at the moment and need to find a different way to call the function). So I tried the below, which doesn't work. The function just isn't working. My script is: PHP Code: <?php session_start(); if (!(isset($_SESSION['login']) && $_SESSION['login'] !='')){ header ("Location: Welcome.php"); } $SMyPId=$_SESSION['MyPId']; include("dbconnect.php"); $result = mysql_query("SELECT (chatterspace) FROM chat WHERE chatter='{$SMyPId}' AND EndDate IS NULL group by chatterspace"); while($row = mysql_fetch_array($result)){ $oak = $oak . ';' . $row['chatterspace']; } $beach=explode(";",$oak); $divonecount=$beach[1]; $divtwocount=$beach[2]; $divthreecount=$beach[3]; $divfourcount=$beach[4]; $divfivecount=$beach[5]; if($divonecount=='chat1'){ $chat1='full'; }else if($divtwocount=='chat1'){ $chat1='full'; }else if($divthreecount=='chat1'){ $chat1='full'; }else if($divfourcount=='chat1'){ $chat1='full'; }else if($divfivecount=='chat1'){ $chat1='full'; }else if($divonecount=='chat2'){ $chat2='full'; }else if($divtwocount=='chat2'){ $chat2='full'; }else if($divthreecount=='chat2'){ $chat2='full'; }else if($divfourcount=='chat2'){ $chat2='full'; }else if($divfivecount=='chat2'){ $chat2='full'; }else if($divonecount=='chat3'){ $chat3='full'; }else if($divtwocount=='chat3'){ $chat3='full'; }else if($divthreecount=='chat3'){ $chat3='full'; }else if($divfourcount=='chat3'){ $chat3='full'; }else if($divfivecount=='chat3'){ $chat3='full'; }else if($divonecount=='chat4'){ $chat4='full'; }else if($divtwocount=='chat4'){ $chat4='full'; }else if($divthreecount=='chat4'){ $chat4='full'; }else if($divfourcount=='chat4'){ $chat4='full'; }else if($divfivecount=='chat4'){ $chat4='full'; }else if($divonecount=='chat5'){ $chat5='full'; }else if($divtwocount=='chat5'){ $chat5='full'; }else if($divthreecount=='chat5'){ $chat5='full'; }else if($divfourcount=='chat5'){ $chat5='full'; }else if($divfivecount=='chat5'){ $chat5='full'; } $result = mysql_query("SELECT * FROM allusers WHERE PId='{$mulberry}'"); while($row = mysql_fetch_array($result)){ $nosegay=rand(). rand(). rand(). rand(). rand(); $nightshade="{$SMyPId};{$mulberry};{$row['fullname']};{$nosegay}"; $elm=$row['pphoto']; $helmlock=$row['fullname']; } $poplar=$_POST['chat']; if($chat1 !=='full'){ echo '<script type="text/javascript"> function This(){ OpenChat(\'chatheader1.php\',\'chat1\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat1.php\',\'ChatDisplayOne\',\'getThisChat1.php\',\'displaytalkOne\',\'artemis=' . $poplar . '\')"; alert("chat1"); } </script>'; }elseif($chat2 !=='full'){ echo '<script type="text/javascript"> function This(){ OpenChat(\'chatheader2.php\',\'chat2\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat2.php\',\'ChatDisplayTwo\',\'getThisChat2.php\',\'displaytalkTwo\',\'artemis=' . $poplar . '\')"; alert("chat2"); } </script>'; }elseif($chat3 !=='full'){ echo '<script type="text/javascript"> function This(){ OpenChat(\'chatheader3.php\',\'chat3\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat3.php\',\'ChatDisplayThree\',\'getThisChat3.php\',\'displaytalkThree\',\'artemis=' . $poplar . '\')"; alert("chat3"); } </script>'; }elseif($chat4 !=='full'){ echo '<script type="text/javascript"> function This(){ OpenChat(\'chatheader4.php\',\'chat4\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat4.php\',\'ChatDisplayFour\',\'getThisChat4.php\',\'displaytalkFour\',\'artemis=' . $poplar . '\')"; alert("chat4"); } </script>'; }elseif($chat5 !=='full'){ echo '<script type="text/javascript"> function This(){ OpenChat(\'chatheader5.php\',\'chat5\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat5.php\',\'ChatDisplayFive\',\'getThisChat5.php\',\'displaytalkFive\',\'artemis=' . $poplar . '\')"; alert("chat5"); } </script>'; }else{ echo '<script type="text/javascript"> function This(){ alert("You have reached your IM capacity, please close a chat box"); } </script>'; } mysql_close($con); ?> Hi there, I am wondering if it is possible to navigate anchor links using a button onclick event. I want next and previous hit buttons to navigate the already existing hits (#hit1, #hit2, etc.). For instance, I have: Code: <script type="text/javascript"> var numHits = {HITS}-1; function nextHit(){ if(numHits > 0){ numHits--; } return("location.href=" '#hit" + numHits + " ' ");//added spaces for visibility } </script> <input type="button" value=">" onclick="nextHit()" /> I have tried onclick="nextHit();", onclick="nextHit(); return true/false", onclick=" return nextHit()" and a bunch of others, with no luck. I have seen working examples with the href tag (e.g. <a href="#" onclick="func();return false">), but nothing with buttons. I also can't seem to get the working href examples to work on my server. For instance, I cannot get this code to work, it just goes to js_required.html: <a href="js_required.html" onclick="doSomething(); return false;">go</a> function doSomething(){ alert("test"); } It seems so simple, I'm assuming I'm missing something very basic. I would greatly appreciate any help! ~Bobio this is my html page.. Code: <html> <head> <script type="text/javascript" language="JavaScript"> function general_formats() { window.open('http://www.test.com/general_formats.php'); } </script> </head> <body> <a href="general_formats.php"><onclick="general_formats(); return false">General Formats</a> </body> </html> When i click ' general Formats ' , a window is opened , i dont need that . What i need is , when i click the link , it should direct to general_fomats.php.. please help me to solve it . .any help will be appreciated . Hello and thanks for letting me on this forum! Im pretty new to JScript and I am still getting used to it all. I am trying to make a Website that allows values to be selected from one form, transferred to the next form as a summary and then completed. The values are sent to the page fine but my Validation is broken. Here is my LINK code In the Form Code: <form id="Tickets" onsubmit="return ValidateForm()" action="Details.html"> And in the Submit Button Code: <input type="submit" id="OrderTickets" value="Order Tickets" onclick="return ValidateForm()" > My validation is as follows Code: <script type = "text/javascript"> function ValidateForm() { if( document.getElementById('DepartingStation').selectedIndex == " ") { alert( "Please provide a Departing Station!" ); document.getElementById('DepartingStation').focus() ; return false; } if( document.getElementById('ArrivingStation').selectedIndex == " ") { alert( "Please provide an Arriving Station!" ); document.getElementById('ArrivingStation').focus() ; return false; } var Depart = document.getElementById('DepartingStation').value; var Arriv = document.getElementById('ArrivingStation').value; if( Depart==Arriv){ alert( "Train cannot depart and arrive at the same station!" ); return false; } if ( document.getElementById('ReturnTravel').checked=true; { var valueDate = document.getElementById('OutwardDate').value; if ( valueDate== null || valueDate== '') { alert('Please provide an Outward Travel Date!'); return false; } } var valueRetDate = document.getElementById('ReturnDate').value; if ( document.getElementById('ReturnTravelType').checked==true && (valueRetDate== null || valueRetDate== '' )) { alert('Please provide a Return Travel Date!'); return false; } } Id appreciate any help anyone can share on this! Thanks. Hi Guys, I am trying to make a change to my website so when someone clicks on the chinese flag image, for example, a function which put the clock forward a few hours. This is what the code I have got at the moment: <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=en'; ?>"><img src="images/uk.gif" title="english" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=zh'; ?>"><img src="images/ch.gif" title="chinese" onclick="chinatime()" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=ja'; ?>"><img src="images/jap.gif" title="japanese" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=kk'; ?>"><img src="images/kaz.gif" title="kazakh" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang='.$most_preferred; ?>">Browser Set</a></td> </tr> <tr> <td colspan="5"> <p class="meta"><span class="date"><script type="text/javascript"> var currentTime = new Date() var minutes = currentTime.getMinutes() var hours = currentTime.getHours() var month = currentTime.getMonth() + 1 var day = currentTime.getDate() var year = currentTime.getFullYear() function chinatime() { hours = hours + 5 } if (minutes < 10) minutes = "0" + minutes document.write(day + "/" + month + "/" + year + " " + hours +":"+minutes) </script> Many Thanks Well, I'm a beginner to coding, so I need some help. I'm trying to create a short, html/javascript mario text game. Now, in the beginning, he fights a goomba. He has a health and energy number as variables: Code: <p><img src="http://img253.imageshack.us/img253/9202/mariodisplayidlefront.png" align="middle" hspace=20> <font size=3 color="red"> Health: <script language= "javascript"> var mariohealth = '20'; document.write(mariohealth); </script> </font> <br><font size=3 color="green"> Energy: <script language= "javascript"> var marioenergy = '20'; document.write(marioenergy); </script> </align> </font> And the goomba has health: Code: <p><br><img src="http://img23.imageshack.us/img23/9438/goombafrontdisplay.png" align="middle" hspace=20> <font size=3 color="red"> Health: <script language= "javascript"> var goombahealth = '10'; document.write(goombahealth); </script> </font> And then, there will be different buttons for different attacks. However, the only one created is "Punch", with this code: <FORM> <INPUT type="button" value="Punch" name="Mario Punch" onClick="?"> </FORM> What would I put in the onClick function to make it subtract 4 health from the goomba and 2 health from Mario |