|
JavaScript - Multiple Javascript Event Problem
Hello, I have a script I am using which works great, except when I copy the code and have multiple events it only shows the first one. This I believe is because it's calling the first class name of it's kind. I want the class's to be named the same thing (css styling) and because the site is going to be dynamically driven, but is there a way to modify my script so that instead of looking for the first class it recognizes the right class associated with the button clicked. If anyone can help me fix this problem I am having I would be most appreciative..
Code: <script language="javascript">
function toggle() {
var ele = document.getElementById("commpopup");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
<div class="togglecomment">
<div class="popup" id="commpopup">
<div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
</div>
<div class="button"><a href="javascript:toggle();"><img src="images/comment_btn.jpg" /></a></div>
</div>
Similar TutorialsHello all, I'm wondering if anyone can offer advice on a simple (or so I thought!) Javascript menu I'm trying to create. I'm creating 5 buttons, using event handlers (onmouseover etc) which exchange 1 image for another. I did the first one fine - it worked perfectly, but as soon as I added the rest they all stopped working properly. The best I have got, is that the last link will do what it's supposed to regardless of which link I hover over! Which is strange. So the browser seems to be actioning the last thing on the list if that makes sense. It seems to me that I need to add an "if" type attribute, so "if" I hover over the home button, the home images change, as opposed to the last one on the list. This is the code I have so far for a single link - the rest are copies of this with adjustments made to the imgname and image sources obviously..... <div style="width:80px; height:20px;margin-top:20px;margin-left:85px;"><a href="about.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()" ><img name="aboutbutton" src="img/aboutn.png" width="80" height="20" border="0" alt="javascript button 1"></a> <script language="JavaScript"> upImage = new Image(); upImage.src = "img/abouth.png"; downImage = new Image(); downImage.src = "img/aboutc.png" normalImage = new Image(); normalImage.src = "img/aboutn.png"; function changeImage() { document.images["aboutbutton"].src= upImage.src; return true; } function changeImageBack() { document.images["aboutbutton"].src = normalImage.src; return true; } function handleMDown() { document.images["aboutbutton"].src = downImage.src; return true; } function handleMUp() { changeImage(); return true; } </script></div> Any suggestions on where I am going wrong would be wonderful. Thanks so much in advance! All the best Hello everyone, If I type the name, and I check and Gender Scholar, my button will appear What I am looking to: Check my buttons, and when I start typing the name, the button Submit appear, st if I delete the text, the Submit button disappear Here's the script: Code: <head>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
function check_required(){
//alert(document.getElementById('rdo_boursier_oui').checked);
//alert(document.getElementById('txt_lastname').value != "");
if((document.getElementById('rdo_boursier_oui').checked == true
|| document.getElementById('rdo_boursier_non').checked == true) &&
(document.getElementById('rdo_sexe_eleve_m').checked == true ||
document.getElementById('rdo_sexe_eleve_f').checked == true)
&& (document.getElementById('txt_lastname').value != "" )
)
{
document.getElementById
('submit_etape2').style.display='block';
}else{
document.getElementById
('submit_etape2').style.display='none';
}
}
</script>
</head>
<form action="#" method="post" id="commentForm">
<input class="submit" type="submit" name="submit_etape2"
id="submit_etape2" value="" style="display:none;"/>
<p class="p_float">
<label for="lastname">Votre nom<span
class="required_red">*</span></label>
<input type="text" name="txt_lastname"
id="txt_lastname" value="" class="required" minlength="3"
onchange="check_required();"
/>
</p>
<p class="p_float rdo">
<label for="boursier">Boursier<span
class="required_red">*</span></label>
<input type="radio" name="rdo_boursier"
id="rdo_boursier_oui" value="" class="rdo_sexe_eleve snd_inscription
required" onclick="check_required();"/>Oui
<input type="radio" name="rdo_boursier"
id="rdo_boursier_non" value="" class="rdo_sexe_eleve snd_inscription
required" onclick="check_required();"/>Non
</p>
<p class="p_float rdo">
<label for="sexe">Sexe<span
class="required_red">*</span></label>
<input type="radio"
name="rdo_sexe_eleve" id="rdo_sexe_eleve_m" class="rdo_sexe_eleve
snd_inscription required" onclick="check_required();" value="">M
<input type="radio"
name="rdo_sexe_eleve" id="rdo_sexe_eleve_f" class="rdo_sexe_eleve
snd_inscription required" onclick="check_required();" value="">F
</p>
</form>
Here is a javascript/html code that changes a text phrase to something else on mouseover but it doesn't return to its original state before the event happened. The code is below. Thank you for your help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script></script>
<title>Javascript</title>
<style type="text/css">
div
{
font-family: Georgia
}
</style>
</head>
<body>
<script type="text/javascript">
function changetext()
{
var textchange2 = "~Home~" ;
var id = document.getElementById("A");
id.innerHTML=textchange2;
}
</script>
<div id="A" onmouseover="changetext();">Home</div>
</body>
</html>
I have the following javascript function: [ function addNewWindowEvent(evType, fn) { if (window.addEventListener) { this.addEventListener("load", fn, false); return true; } else if (window.attachEvent) { var onload = "onload" this.attachEvent(onload, fn); return true; } else { return false; } } ] which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no] and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks. henryv All I am using my SOAP API using java script. this example explain how to send single soap request using js Code: var symbol = "MSFT";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://www.webservicex.net/stockquote.asmx?op=GetQuote",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4) {
alert(xmlhttp.responseText);
// http://www.terracoder.com convert XML to JSON
var json = XMLObjectifier.xmlToJSON(xmlhttp.responseXML);
var result = json.Body[0].GetQuoteResponse[0].GetQuoteResult[0].Text;
// Result text is escaped XML string, convert string to XML object then convert to JSON object
json = XMLObjectifier.xmlToJSON(XMLObjectifier.textToXML(result));
alert(symbol + ' Stock Quote: $' + json.Stock[0].Last[0].Text);
}
}
xmlhttp.setRequestHeader("SOAPAction", "http://www.webserviceX.NET/GetQuote");
xmlhttp.setRequestHeader("Content-Type", "text/xml");
var xml = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' +
'<soap:Body> ' +
'<GetQuote xmlns="http://www.webserviceX.NET/"> ' +
'<symbol>' + symbol + '</symbol> ' +
'</GetQuote> ' +
'</soap:Body> ' +
'</soap:Envelope>';
xmlhttp.send(xml);
// ...Include Google and Terracoder JS code here...
Now i want to send multiple soap request at a time (mean request more than one envelop). Good morning guys. I am new to Javascript and am trying to add some functionality to a website but have come across a problem when trying to utilise two seperate Javascript onloads events. I have a text scroller to display the latest news and I also have a javascript lightbox gallery. Both of these events work perfectly on their own but when I try to include both on one page only one of the events is executed. My code is displayed below: Code: <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("ul#news-scroller").liScroll({travelocity: 0.04});
});
</script>
</head>
<body onload="clickMenu('gallery'); initLightbox()">
If anyone could tell me where my mistake is I would be so grateful. I know it is probably a really obvious mistake but being new to this I am unsure where to start looking. Thanks in advance! Mack Hi! I'm trying to make a multiple choice quiz using javascript. I downloaded codes from http://www.javascriptkit.com/script/cut180.shtml But when I used it nothing comes up on the results (number of correct answer, number of wrong answer and percentage) as well as the solution box is empty. I tried it on Google Chrome and it says "Your browser does not accept cookies. Please adjust your settings." So I tried it in Safari because that's what we use in school and it doesn't work. The results and solution box is empty. I am guessing that problem is with cookies? Please help me. Here are my codes: - Quiz //Enter total number of questions: var totalquestions=10 //Enter the solutions corresponding to each question: var correctchoices=new Array() correctchoices[1]='a' //question 1 solution correctchoices[2]='d' //question 2 solution, and so on. correctchoices[3]='b' correctchoices[4]='b' correctchoices[5]='c' correctchoices[6]='b' correctchoices[7]='a' correctchoices[8]='c' correctchoices[9]='d' correctchoices[10]='b' /////Don't edit beyond here////////////////////////// function gradeit(){ var incorrect=null for (q=1;q<=totalquestions;q++){ var thequestion=eval("document.myquiz.question"+q) for (c=0;c<thequestion.length;c++){ if (thequestion[c].checked==true) actualchoices[q]=thequestion[c].value } if (actualchoices[q]!=correctchoices[q]){ //process an incorrect choice if (incorrect==null) incorrect=q else incorrect+="/"+q } } if (incorrect==null) incorrect="a/b" document.cookie='q='+incorrect if (document.cookie=='') alert("Your browser does not accept cookies. Please adjust your browser settings.") else window.location="results.htm" } function showsolution(){ var win2=window.open("","win2","width=200,height=350, scrollbars") win2.focus() win2.document.open() win2.document.write('<title>Solution</title>') win2.document.write('<body bgcolor="#FFFFFF">') win2.document.write('<center><h3>Solution to Quiz</h3></center>') win2.document.write('<center><font face="Arial">') for (i=1;i<=totalquestions;i++){ for (temp=0;temp<incorrect.length;temp++){ if (i==incorrect[temp]) wrong=1 } if (wrong==1){ win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>") wrong=0 } else win2.document.write("Question "+i+"="+correctchoices[i]+"<br>") } win2.document.write('</center></font>') win2.document.close() } ______________________________________________________________ For Results <html> <head> <title>Instant Quiz Results</title> </head> <body bgcolor="#FFFFFF"> <p align="center"><strong><font face="Arial"> <script src="quizconfig.js"> </script>Quiz Results Summary</font></strong></p> <div align="center"><center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116"> <tr> <td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Number Of Correct Questions:</font></strong></td> <td height="25"><p><input type="text" name="p" size="24"></td> </tr> <tr> <td height="17" bgcolor="#D3FFA8"><strong><font face="Arial">Wrong Questions:</font></strong></td> <td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td> </tr> <tr> <td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Grade Percentage:</font></strong></td> <td height="25"><input type="text" name="q" size="8"></td> </tr> </table> </form> </td> </tr> </table> </center></div> <form method="POST"><div align="center"><center><p> <script> var wrong=0 for (e=0;e<=2;e++) document.result[e].value="" var results=document.cookie.split(";") for (n=0;n<=results.length-1;n++){ if (results[n].charAt(1)=='q') parse=n } var incorrect=results[parse].split("=") incorrect=incorrect[1].split("/") if (incorrect[incorrect.length-1]=='b') incorrect="" document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%" for (temp=0;temp<incorrect.length;temp++) document.result[1].value+=incorrect[temp]+", " </script> <input type="button" value="Retake Quiz" name="B1" onClick="history.go(-1)"> <input type="button" value="Show Solution" name="B2" onClick="showsolution()"></p> </center></div> </form> </body> </html> Please help me. I've been trying to find out what is wrong with my codes for a week. Thanks in advance! I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks the code is var quotations = new Array() quotations[0]= "germaine arnold" quotations[1]= "endearing moral" quotations[2]= "analog reminder" quotations[3]= "regained normal" quotations[4]= "renaming ordeal" quotations[5]= "nominal regrade" quotations[6]= "arraigned lemon" quotations[7]= "ringleader moan" quotations[8]= "mineral groaned" function display() { a=Math.floor(Math.random()*quotations.length) document.getElementById('quotation').innerHTML=quotations[a] setTimeout("display()",5000) } and i'm calling the function using: <div id="quotation"> <SCRIPT type="text/javascript">display()</SCRIPT> </div> Hi, I have a problem in javascript, where entering a value in the textbox during onblur I am doing a refresh to bring in the updated records from the DB , before the on blur refresh is completed if the user clicks the search button (onclick) during the first click nothing is happening as the refresh is still going on. During the second click when the on blur refresh is completed it will open a popup. The problem here is I am unable to disable/inactivate the search button untill the refresh is completed as well as I dont have any control over the refresh time as well. This is like already an event is in progress and where we are invoking another event which is not having any effect. In such case how i can handle this scenario? Thanks. hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
Every time I try to use the notEmpty function with an onClick event, the validation stops working. I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well. Please help! I'm completely lost. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Date: 11/12/2014
Filename: validator.html
Supporting files: None
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validator</title>
<script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var gpa = document.getElementById('gpa');
var phone = document.getElementById('phone');
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your first name")){
if(isAlphabet(lastname, "Please enter only letters for your last name")){
if(gpaValidator(gpa, "Please enter a valid G.P.A.")){
if(phoneValidator(phone, "Please put a valid phone number")){
return true;
}
}
}
}
return false;
}
// Functions that check values in input fields!
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function gpaValidator(elem, helperMsg){
var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function phoneValidator(elem, helperMsg){
var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
<fieldset>
<legend>Personal information:</legend><br />
First Name: <input type='text' id='firstname' /><br />
Last Name: <input type='text' id='lastname' /><br />
G.P.A.: <input type='text' id='gpa' /><br />
Phone Number: <input type='text' id='phone' /><br />
<input type='submit' value='Submit' />
</form>
</body>
</html>
Hi i am using the following code to load a part of page dynamically using jquery Code: loadNextBackInPage_URL = null;
function callBackFunctionLoadNextBackInPage(data)
{
//alert(data);
$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);
if(supports_history_api())
{
history.pushState(null, null, loadNextBackInPage_URL);
window.addEventListener("popstate", function(e) {
alert('s');
loadNextBackInPage(location.pathname);
});
}
else
{
}
}
function loadNextBackInPage(url,parm)
{
//alert(url);
loadNextBackInPage_URL = url;
$("#left").fadeTo(100,.2);
$.post(url,parm,callBackFunctionLoadNextBackInPage,'html');
}
The loading part and even changing the browser URL is working. but why is the PoP state function being fired multiple times? I call loadNextBackInPage() originally through an onclick function. I have added an event listener to a LI item in the DOM: liNode.addEventListener("mouseover", mouseOn, true); The mouseOn function: function mouseOn(e) { // Test for IE or Firefox var e = (!e)?window.event:e; var yPos; if (e.pageY) { yPos = e.pageY; } else { yPos = e.clientY; } } I would like to pass in another parameter to the mouseOn function in addition to the event that is passed in automatically. Is there a way to do this? I have several list items in an html document. Each list item has an anchor tag and each anchor has an 'onmouseover' event. Is it possible to get the containing object for the event upon the mouseover? I assum the following html code: <div id="id1" onclick="click()">A<div> <div id="id2" onclick="click()">B<div> Do you know how to get ID = id2 when I onclick on A? Hai all, iam trying to use java script code in my jsp page. i used a onclick event.while clicking on the button that wil goes to the javascript function(deleteRecord(name,subject)). this deleterecord() wil post the url request. my code is like this ----------------- function deleteRecord(name,subject){ document.write("name received is:"+name); f.method="post"; var url="http://localhost/myproject/DeleteRecord?"; var url1= "name="+name; var url2="subject="+subject; var URL=url+url1+url2; f.action(URL); f.submit(); } my onclickevent code is' <td width="20%" height="25" align="left" valign="middle"><input type="submit" name="delete" value="Delete" style="background-color:#ff0000;font-weight:bold;color:#ffffff;" onclick="deleteRecord(<%=rs.getString("name")%>,<%=rs.getString("subject")%>);" /></td> --------------------------------------------- wil iam running my jsp page internet explorer is giving in variable subject (error:'divi' is invalid).divi is the value of the parameter name which iam passing to the function . and mozilla firefox my script is not working there is some syntax issues as wel as browser issues...and with url syntax can any one help me... Regards, Divya can someone please explain the code in this link. Just this small bit since i seen it in a few different places. it starts off with if (!e) ... please explain wth that means thank you so much heres the link - http://www.w3schools.com/js/tryit.as...ent_srcelement hello everyone, i am new to all this.. i need help regarding.. i am generating text box dynamically(mean it's a multiple select box, depending upon the number you select , it will generate that many text field.) my problem is that i want to assign a calender to the text field generated whenever a user clicks on that text field. i am able to do it for simple text field as onclick="javascript: showCalendar('idname')" but how to do it in this case, where can i declare this ? |
|||||||