|
JavaScript - Onclick Problem
PHP Code:
var deck = new Array (52); for (var ind = 0, face = 1; ind < 52; ind+=4, face++) { deck[ind] = face + "c"; deck[ind + 1] = face + "d"; deck[ind + 2] = face + "h"; deck[ind + 3] = face + "s"; } for (var a = 0, b = 0, c = 0; a < 19; a++, b+=2) { document.write("<img src='cards/placeholder.gif' name='" + deck[b] + "' width='53' height='68' onClick='alert(" + deck[b] + ")'>"); } I have this code for my Go Fish game, however it will not show an alert when you click the image. I've also tried onClick='alert(deck[" + b + "])' but that does not work either. Can someone help me please? Similar TutorialsHello Everyone! I have one link that I need to do two onclick events at once. At first I just tried writing them both but that obviously didn't work b/c I'm here! This would result in the first onclick event tacking place and not the second. So my question is could someone tell me how to write this code in javascript, so both events will take plack onclick, and then how I should reference that script within my link? Thank you for taking a look Code: <a href = "javascript:void(0)"
onclick = "document.getElementById('light<?php echo $count;?>').style.display='none';document.getElementById('fade<?php echo $count;?>').style.display='none'"
onclick = "document.getElementById('light<?php echo $count + 1;?>').style.display='block';document.getElementById('fade<?php echo $count + 1;?>').style.display='block'"> Previous
</a>
I finished this code, the full code is not here, but when I ran it as a diagnostic the action did not occur when i clicked on the "process item" button. I believe it may have something to do with the script, but i am new to javascript and cannot seem to figure it out, it is supposed to multiply the price by the number to give the value of sale (sale). Any help would be much appreciated!!! Code: <html>
<script language="javascript">
function test()
{
var Items,Price,Number,sale;
Items = parselfloat(document.victoria.secondnumber.value);
Price = parselfloat(document.victoria.price.value);
Number = parselfloat(document.victoria.num.value);
sale = Price*Number;
document.victoria.val.value=sale;
}
</script>
<body><form name ="victoria">
<center>
<table border=40 bordercolor="yellow">
<tr><td>Customer Number <input name ="firstnumber" type="text" size="6" value="1" ></td>
<td>Home Delivery <input name="customer_name" type="checkbox"Checked></td><tr>
<tr><td>Items Purchased</td><td><center><input name="secondnumber" type="text" size="12"></center></td></tr>
<tr><td>Item Number</td><td><center><input name="itemnum" type="text" size="12" value="1"></center></td></tr>
<tr><td>Price</td><td><center><input name="price" type="text" size="12"></center></td></tr>
<tr><td>Number Purchased</td><td><center><input name="num" type="text" size="12"></center></td></tr>
<tr><td>Value of Sale</td><td><center><input name="val" type="text" size="12" value="0"></center></td></tr>
<tr><td>Customer Total</td><td><center><input name="total" type="text" size="12" value="0"></center></td></tr>
<tr><td></td><td><input type="button" value="Process Item" onclick="test()"></td></tr>
</table>
</center></form>
</body></html>
I've been doing some research as to why this doesn't work but to no avail. I'm hoping someone here can lend a hand/brain. I'm relatively new to Javascript. This works perfectly in FF and IE7 but not IE6. The very last "tdright" div at the bottom of this list (the item shown in the HTML I've provided is in the middle of 30+ rows of parameters) also gets out of whack in IE6 for some reason. FF is fine, of course. Code: var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}
function toggleID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
if (element.style.display=="none"){
element.style.display="block"
}
else {
element.style.display="none"
}
}
Code: <div class="tdright">: <input type="text" size="1" name="x_label_angle" value="<?php echo $_SESSION['x_label_angle']; ?>"></div>
<div class="tdleft"><p class="IEtop4px">Interval</p></div>
<div class="tdright">:
<select name="x_label_interval" style="width:80px">
<option value="First & Last" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "First & Last") { ?> selected<?php } ?>>First & Last
<option value="Halfway" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "Halfway") { ?> selected<?php } ?>>Halfway
<option value="One-Third" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "One-Third") { ?> selected<?php } ?>>One-Third
<option value="All" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "All") { ?> selected<?php } ?>>All
<option value="Other" onClick="showID('x_label_other_left');showID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "Other") { ?> selected<?php } ?>>Other
</select>
</div>
<div class="tdleft" id="x_label_other_left" style="display:none"></div>
<div class="tdright" id="x_label_other_right" style="display:none"> <input type="text" size="1" name="x_label_other_interval" value="<?php if (is_numeric($_SESSION['x_label_interval'])) { echo $_SESSION['x_label_interval']; } ?>"></div>
Thanks in advance! hi i have a problem coding a menu i have 4 links on menu and clicking on items should expand a DIV and change the menu item image. also rollover has to change the image too i mean 3 conditions for every menu item: normal, rollover, clicked. i have no problem with rollover but when item is been clicked and image changes, image has to change on mouse over again, but has not to change to original image on mouse out. also clicking on another menu item has to change the previous item image to original. i'm confused enough i tried by samples over and over. but the main problem is that i dont know js syntaxes and coding however, anybody could help??? 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 So I've done a ton of research and tried every fix I could think of (jQuery fixes, htc behaviours, etc) and nothing has worked. It seems most of the fixes are built for just changing the background color. I just can't get it to work in IE6! Even if I just got the Javascript to change the state without rollovers (for IE6) that would be okay. The way it's setup is that there's an image in 3 states in it (inactive, rollover, active), setup on the y-axis. So when a user rolls over it shoves the background down 111px to show the rollover, etc. I know IE6 doesn't support hover on anything except anchors. This works in IE 7/8 FF 2/3 Safaris and most likely everything else: http://www.muchomungo.com/CrowdTwist..._template.html Relevant CSS Code: li {
list-style:none;
float:left;
}
ul {
list-style:none;
margin:0;
padding:0;
}
ul#toolbar a {
height: 111px;
display:block;
text-indent:-9999px;
font-size:0px;
line-height:0px;
outline: none;
}
#toolbar li.unselected:hover {
background-position:0px 222px;
}
#toolbar li.selected {
background-position: bottom;
height: 111px;
z-index: 10;
}
#toolbar li.unselected {
background-position: top;
margin-left:0px;
}
CSS file JS Code: var currentSection = 'dashboard';
var newpane = function(gotoLink){
if (currentSection == gotoLink) {
return;
}
lastSection = currentSection;
currentSection = gotoLink;
// Change the section highlight.
// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state
document.getElementById(currentSection).className = "selected";
if (lastSection) {
document.getElementById(lastSection).className = "unselected";
}
}
Thanks for any help! Hi there, I'm soo stuck on particular piece of code.. You see i have 2 radio buttons with values 12hr and 24hr; on clicking any of the above the time format should change automatically. by default the time format comes in 12hr format against onload event of <body>. I've tried using javascript but this problem is persisting... Can anyone help me pleassssse.. i m very new to this thread so i will try to be as clear as possible i m try to create a website where i n have inserted a menu (this menu template i found online which is free.) Code: <div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<li><a href="#"><span>Cities</span></a>
<div><ul>
<li><a href="#"><span>Pune</span></a></li>
<li><a href="#"><span>Mumbai</span></a></li>
<li><a href="#"><span>Delhi</span></a></li>
<li><a href="#"><span>Madras</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Login</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li class="last"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>
what i am trying to do here is when i click on city (one of the menu) it should read the values from database table (the table name is cityCode. this table contains two rows first cityName and second cityCode) n depending on which city is selected it should retrieve the code of that city. also where to save that retried value because i want to use that retried code to extract value from another table. What I am trying to achieve, is a button that calls a function that changes the onclick attribute of that button, so that when it is clicked again, it resets the onclick attribute to call the default function. here is what the stripped down code looks like: Code: <html>
<head>
<script type="text/javascript">
function remove_prep(a){
a.value="cancel";
a.onclick="cancel_remove(this);";
}
function cancel_remove(a){
a.value="remove";
a.onclick="remove_prep(this);";
}
</script>
</head>
<body>
<input type="button" value="remove" onclick="remove_prep(this);" />
</body>
</html>
for some reason, it only fires once, after which it ceases to work properly. thanks for the help this part of my code is killing me. Here is my script -- Applied in <head> Code: <script language="JavaScript">
var bgImage = new Array(); // don't change this
bgImage[0] = "images/aboutus_1.jpg";
bgImage[1] = "images/1.jpg";
bgImage[2] = "images/2.jpg";
bgImage[3] = "";
function changeBG(bgImage)
{
document.body.background = backImage[bgImage];
}
</script>
And here is the code im using that is not working within <body> Code: <body>
<div id="map"></div>
<div id="bf_container" class="bf_container">
<div id="bf_background" class="bf_background">
<img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>
<div class="bf_overlay"></div>
<div id="bf_page_menu" class="bf_menu" >
<h1 class="title">Fujiyama<span>Japanese</span></h1>
<ul>
<li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
<li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>
this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1. Any help would be greatly appreciated. Thanks, Cross i have the code: foreach($product_names as $product_row) { ?> <tr> <td > </td><td width='200px'><?php echo $product_row->getName();?></td> <td width='200px'><input type="checkbox" name="graphic[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> <td width='200px'><input type="checkbox" name="text[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> </tr> <?php } ?> and a submit button on the page. the i also have the javascript code for the onclick="check()" : <html> <head> <script type="text/javascript"> function check() { var graphics = document.getElementsByName("graphic[]"); for(i=0;i<graphics.length;i++) { if(graphics[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } var text = document.getElementsByName("text[]"); for(i=0;i<text.length;i++) { if(text[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } } </script> </head> so what all this means is i have two arrays of checkboxes for each product. as soon as i check any checkbox the submit button appears. i click on the submit button and i go to the next form. the problem now comes in if i click on the "back" button to go back to the previous page via the bwrowser..the submit button is disabled althou all my checkboxes that i checked, are still checked....i want the submit button to show??? please help?? thanks hi all im trying to hide a div on page load, ive used this. Code: <script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";
}
hideDiv()
</script>
and this in the body tag Code: <body onload="javascript:hideDiv()"> it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show. can this be done? please help if you can this work has to be in soon Hi, I have the script below working fine in IE but not FF, can any one help me?? The script creates new fields with calendar in a form, if new information is added to a field and then a new field is created the information is lost in FF Live demo: http://hotelendenia.com/sandbox/ Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Calendar Text Input</title>
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
<script type="text/javascript">
function extend(m, e){
var e = e || this;
for (var x in m) e[x] = m[x];
return e;
};
function create(type, opt, parent){
var el = document.createElement(type);
if (opt.style){
extend(opt.style,el.style);
}
delete opt.style;
extend(opt,el);
if (parent){
parent.appendChild(el);
}
return el;
}
fields = 0;
function add_input(){
document.getElementById('input_container').innerHTML += ""+ fields +"<input id=\"cal"+ fields +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ fields +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
fields += 1;
}
</script>
</head>
<body>
<div>
<form>
<div id="input_container">
</div>
<br /><input type="submit" value="submit">
</form>
<a href="#" onclick="add_input()">add input</a>
</div>
</body>
</html>
Have spent over 40 hours trying to make something like this work. Any help will be received with profound gratitude. Code: <!-- First, we reference a script whose purpose is to create a space for session variables similar to cookies. Works if it appears early in body of Drupal page, so this is not the issue (Drupal parses pages down for display so there is no user <head> tag). --> <script type="text/javascript" src="sessvars.js"></script> <script language = "javascript"> <!-- We create the variable whichpage because we will be creating a session variable sessvars.whichpage courtesy of the sessvars.js script--> var whichpage; <!-- Next, we create a lookup table: --> var myTable = new Array(); myTable[1] = "001_Front_Cover_jpg.jpg"; myTable[2] = "002_Inside_Front_Cover_jpg.jpg"; myTable[3] = "003_Frontispiece_Design_jpg.jpg"; </script> <!-- Next, we create a table with thumbnails; each thumbnail image is a hyperlink which, onClick, is supposed to run a script assigning a value to sessvars.whichpage, so when Drupal node 23 is reached, it can use the value of sessvars.whichpage to select the array (myTable) element which corresponds to the full-sized picture we want to load. Node 23 also has the lookup array (myTable). The node inserts the snippet contained in the myTable element into a URL of the picture to load. --> <!-- Here we define the table --> <!-- Next, we have a series of hyperlinks which present the table with thumbnails so clicking on the thumbnail assigns a value to sessvars. whichpage and then transfers to the node that uses that value: --> <a href="23" onClick="<script language = 'javascript'> sessvars.whichpage=1; </script>" <img> </img> </a> <a href="23" onClick="<script language = 'javascript'> sessvars.whichpage=2; </script>" <img> </img> </a> <a href="23" onClick="<script language = 'javascript'> sessvars.whichpage=3; </script>" <img> </img> </a> <!-- The problem is that this flat does not work. When we get to node 23 sessvars.whichpage shows as undefined. It used to work when I called a function instead of put the script into each link, but I found there was no simple way to get the value (1,2,3 etc.) to the function --> Is there an answer. Thank you so much in advance. Leon Malinofsky Using onclick=window.open function in js to open a pdf file link in a new popup window. Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer. The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage and the name of the file will be that for the webpage. Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected, but I can only use target="-blank" or target="_self" . I need a popup window to open. Could use : oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer') to advise users how to save the file, and could use "javascript: void(0)" to eliminate most mouse context menu options, so the user won't bother try. So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu? Any advice massively appreciated! 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. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. <a href="#" onClick="showClubs(<% Response.Write x_ID_Nanny %>);" > Now this showclubs function shows a hidden div and at the end I have a return:false; but when you click on the link - it still seems to reload to the page and take you to the top how can I get it to just show the div without seeming to reload the page? Hello... Here is an example of a site I'm working on: http://mrmatthewreese.com/surine/custominlays.php notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked? Just curious if anyone can help. Here is the javascript code: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='boldlink'; Lst=obj; } /*]]>*/ </script> <a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br /> <a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br /> <a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br /> <a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br /> <a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br /> <a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br /> <a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br /> <a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br /> <a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br /> <a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a> Hi i have a page that allows the user to enter details and also upload an image , I have onclick event on a submit button that goes off and performs a geocode on the postcode and saves the lat long to a database along with the other details they enter ( which all works fine) . The problem is that when i use the onclick event with the submit button it seems to bypass the onclick JS function and just go straight to the image upload bit. Can a button be a submit button and also have an onclick event or is there anything else i can do to fix the problem? |
|||||||