|
JavaScript - One Js Function, Multiple Onchange
Hi all,
I'm new to javascript and am having a few issues. I have a function that I want to run with multiple onchange events. My page has several image selection buttons and I want it to preview the image when/if each one is selected. I have gotten it working for the first on the page but cannot for the remainder. Is this possible or am I wishful thinking? Foster Reply With Quote 01-17-2015, 10:23 AM #2 Arbitrator View Profile View Forum Posts Senior Coder Join Date Mar 2006 Location Splendora, Texas, United States of America Posts 3,423 Thanks 32 Thanked 293 Times in 287 Posts Originally Posted by Foster I'm new to javascript and am having a few issues. I have a function that I want to run with multiple onchange events. My page has several image selection buttons and I want it to preview the image when/if each one is selected. I have gotten it working for the first on the page but cannot for the remainder. Is this possible or am I wishful thinking? Where's the code? If you simply want to assign multiple listeners for the same event on a single element, use element.addEventListener("change", eventHandler) instead of element.onchange = eventHandler or <element onchange="eventHandler();"></element>. Similar TutorialsI've done extensive searching, but each example or explanation i come across is too different from my own, so it's ultimately no use. The problem is that I barely know anything when it comes to Javascript, but yet I'm trying to use it. I have a form on a page. This form contains 6 <select> elements, each with its own <option>Other</option> element. If something isn't listed, the user can choose "Other" and then type into a textbox which appears. I have the following code, which works great if only applied to one <select> element. Code: <select name="How did you hear about us?" id="How did you hear about us?" onchange="makeBox1()">
<option value="0" selected="selected">-- Select --</option>
<option value="1">Search Engine</option>
<option value="2">Referral</option>
<option value="3">Trade Publication</option>
<option value="4">Vendor Web Site</option>
<option value="5">Your Company Website</option>
<option value="6">Direct Mail</option>
<option value="7">Other</option>
</select>
<div id = "inputBox1"></div>
<script type = "text/javascript">
function makeBox1() {
var a = "<input type = 'text' name = 'box1' id = 'box1' class='form popup'>"
if (document.getElementById("How did you hear about us?").value==7) {
document.getElementById("inputBox1").innerHTML = a;
}
else {
document.getElementById("inputBox1").innerHTML = "";
}
}
</script>
I've read that you have to combine onchange events, but i have no idea how to do this (i've done plenty of trial and error, trying to make every item unique, but to no avail. How would i add more scripts like the above? Hi, First time here. I have had no luck searching on Google or here regarding this. Any help is appreciated. I am trying to tie the value of an image src to two onChange events. the events are drop down boxes in a form. I do have a couple of single event driven peices working so I think my logic is sound. I originally tried to do this with multiple if statements that tested both conditions/events. I have since given each event it's own function. I have no idea what i am doing wrong. the onChange events have no effect on the image display at all. The default image just stays in place. My JS knowledge is limited but it looks correct as far as I can tell. What am I missing. Here are the functions: Thank You! Code: function dropdownimageMidC()
{
if(!document.images)
return
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
Code: function dropdownimageMidS()
{
if(!document.images)
return
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
How can i change this code to do not duplicate the boxes when one option is selected in the same box as before? http://www.plpgolfandturf.com.au/rr/rrboxes_test.php Code: <script type="text/javascript">
function SetHTML2(type) {
//document.getElementById("1").style.display = "none"
//document.getElementById("2").style.display = "none"
//document.getElementById("3").style.display = "none"
//document.getElementById("4").style.display = "none"
//document.getElementById("1.1").style.display = "none"
//document.getElementById("1.2").style.display = "none"
//document.getElementById("1.3").style.display = "none"
//document.getElementById("1.4").style.display = "none"
document.getElementById("2.1").style.display = "none"
document.getElementById("2.2").style.display = "none"
document.getElementById("2.3").style.display = "none"
document.getElementById("2.4").style.display = "none"
document.getElementById("3.1").style.display = "none"
document.getElementById("3.2").style.display = "none"
document.getElementById("3.3").style.display = "none"
document.getElementById("3.4").style.display = "none"
document.getElementById("4.1").style.display = "none"
document.getElementById("4.2").style.display = "none"
document.getElementById("4.3").style.display = "none"
document.getElementById("4.4").style.display = "none"
document.getElementById("1.1.1").style.display = "none"
document.getElementById("1.1.2").style.display = "none"
document.getElementById("1.1.3").style.display = "none"
document.getElementById("1.1.4").style.display = "none"
document.getElementById("1.2.1").style.display = "none"
document.getElementById("1.2.2").style.display = "none"
document.getElementById("1.2.3").style.display = "none"
document.getElementById("1.2.4").style.display = "none"
document.getElementById("1.3.1").style.display = "none"
document.getElementById("1.3.2").style.display = "none"
document.getElementById("1.3.3").style.display = "none"
document.getElementById("1.3.4").style.display = "none"
document.getElementById("1.4.1").style.display = "none"
document.getElementById("1.4.2").style.display = "none"
document.getElementById("1.4.3").style.display = "none"
document.getElementById("1.4.4").style.display = "none"
document.getElementById(type).style.display = ""
}
</script>
<!--Display box -->
<font face="Verdana, Geneva, sans-serif" size="4" color="#FF0000"><br />
Search Parts</font><br />
<br />
<select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1">Beck</option>
<option value="2">BobCat</option>
<option value="3">Briggs</option>
<option value="4">Yazoo</option>
</select>
<span id="1" style="display:none" ><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.1">Beck 1</option>
<option value="1.2">Beck 2</option>
<option value="1.3">Beck 3</option>
<option value="1.4">Beck 4</option>
</select></span>
<span id="2" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="2.1">BobCat 1</option>
<option value="2.2">BobCat 2</option>
<option value="2.3">BobCat 3</option>
<option value="2.4">BobCat 4</option>
</select></span>
<span id="3" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="3.1">Briggs 1</option>
<option value="3.2">Briggs 2</option>
<option value="3.3">Briggs 3</option>
<option value="3.4">Briggs 4</option>
</select></span>
<span id="4" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="4.1">Yazoo 1</option>
<option value="4.2">Yazoo 2</option>
<option value="4.3">Yazoo 3</option>
<option value="4.4">Yazoo 4</option>
</select></span>
<span id="1.1" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.1.1">Beck 1.1</option>
<option value="1.1.2">Beck 1.2</option>
<option value="1.1.3">Beck 1.3</option>
<option value="1.1.4">Beck 1.4</option>
</select></span>
<span id="1.2" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.2.1">Beck 2.1</option>
<option value="1.2.2">Beck 2.2</option>
<option value="1.2.3">Beck 2.3</option>
<option value="1.2.4">Beck 2.4</option>
</select></span>
<span id="1.3" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.3.1">Beck 3.1</option>
<option value="1.3.2">Beck 3.2</option>
<option value="1.3.3">Beck 3.3</option>
<option value="1.3.4">Beck 3.4</option>
</select></span>
<span id="1.4" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.4.1">Beck 4.1</option>
<option value="1.4.2">Beck 4.2</option>
<option value="1.4.3">Beck 4.3</option>
<option value="1.4.4">Beck 4.4</option>
</select></span>
<span id="2.1" style="display:none"> text </span>
<span id="2.2" style="display:none"> text </span>
<span id="2.3" style="display:none"> text </span>
<span id="2.4" style="display:none"> text </span>
<span id="3.1" style="display:none"> text </span>
<span id="3.2" style="display:none"> text </span>
<span id="3.3" style="display:none"> text </span>
<span id="3.4" style="display:none"> text </span>
<span id="4.1" style="display:none"> text </span>
<span id="4.2" style="display:none"> text </span>
<span id="4.3" style="display:none"> text </span>
<span id="4.4" style="display:none"> text </span>
<span id="1.1.1" style="display:none"> text </span>
<span id="1.1.2" style="display:none"> text </span>
<span id="1.1.3" style="display:none"> text </span>
<span id="1.1.4" style="display:none"> text </span>
<span id="1.2.1" style="display:none"> text </span>
<span id="1.2.2" style="display:none"> text </span>
<span id="1.2.3" style="display:none"> text </span>
<span id="1.2.4" style="display:none"> text </span>
<span id="1.3.1" style="display:none"> text </span>
<span id="1.3.2" style="display:none"> text </span>
<span id="1.3.3" style="display:none"> text </span>
<span id="1.3.4" style="display:none"> text </span>
<span id="1.4.1" style="display:none"> text </span>
<span id="1.4.2" style="display:none"> text </span>
<span id="1.4.3" style="display:none"> text </span>
<span id="1.4.4" style="display:none"> text </span>
<br />
<br /><a href="http://www.plpgolfandturf.com.au/rr/rrboxes_test.php"><img src="http://www.plpgolfandturf.com.au/rr/bt2.png" border="0" /></a>
The simplified code below works, and should give you an idea of what Im trying to achieve. The final version will have dozens of input fields so you can see why the below method stinks Code: <html><head><title>Values</title>
<script type="text/javascript">
<!--
function getid() {
var myNum = document.frm1.field1.value;
if(myNum == "A"){
document.frm1.field2.value = "1"
} else if(myNum == "B"){
document.frm1.field2.value = "2"
} else {
document.frm1.field2.value = ""
}
var myNum2 = document.frm1.field3.value;
if(myNum2 == "A"){
document.frm1.field4.value = "1"
} else if(myNum2 == "B"){
document.frm1.field4.value = "2"
} else {
document.frm1.field4.value = ""
}
}
//-->
</script>
</head><body>
<form name="frm1" id="frm1">
<input type="text" size="40" name="field1" id="field1" onChange="JavaScript:getid();" /><input type="text" size="4" id="field2" name="field2" /> <br>
<input type="text" size="40" name="field3" id="field3" onChange="JavaScript:getid();" /><input type="text" size="4" id="field4" name="field4" /> <br>
</form>
</body>
</html>
Each text input will have A or B written in by the user, which should automatically place that letters associated ID in its partner field. If any other letter is entered the ID will automatically be left blank. With the above code I'd need to repeat it over and over for each of the dozens of input fields. The final version wont be using simply A/B either but around 50 possible inputs each with their own ID which would make around 1000 possible variations. What am I missing here that will simplify the process? Thanks I probably have gone about this all wrong since I am a complete noobe, but if someone could point me in the right direction I would be very thankful. Here is the situation. What works: I have a drop menu that is being generated by a PHP/MYSQL script, when you choose an option the onchange event is triggered and runs a function that sends the value to a php script so a graphical image can be generated and saved with a random file name. The randomly generated image name is sent back as an XML response and then image is displayed with src The Problem: I need to be able to have a function store the value from the onchange event and run again when the page refreshes. As of right now, when the page refreshes the image is gone. I have attempted to do this with cookies, but not exactly sure how I will do this and I have finally decided to ask for help. I hope my explanation is not confusing, please let me know if you need more info or if you need to see my code. Hi there, I have a drop down menu that runs a function when one of the options are chosen. Is there a way to have this run from individual links? <select name="users" onChange="showUser(this.value)"> <option value="">Select a Deer:</option> <option value="1">8002</option> <option value="2">8009</option> <option value="3">8011</option> Thanks Rich Hey all, I have a little function that performs when a form item is selected. I would like to give the form items all at once and have the function perform when the user mouses over an item in the displayed list. Here is the form code: Code: <form> <select onchange="showRSS(this.value)"> <option value="">Select an RSS-feed:</option> <option value="Google">Google News</option> <option value="MSNBC">MSNBC News</option> </select> </form> thanks a bunch, Brian p.s. I tried this but it didn't work Code: <?php echo("<a href=\"http://www.msn.com\" onMouseover=\"showRSS(this.MSNBC)\">MSNBC News</a>");?>
<br />
<?php echo("<a href=\"http://www.google.com\" onMouseover=\"showRSS(this.Google)\">Google News</a>");?>
<br />
I have the following form working with on onsumbit function, but I would like to change it so that instead of having to click the purchase button to see total price, you only have to change the quanity text box input. I would welcome any help. I just can not seem to get it to work. Code: <script language="javascript" type="text/javascript">
function checkQuantity(frm) {
var succesful = false;
var numQuantity;
numQuantity = parseInt(frm.Quantity.value);
var numTotalPrice;
if (numQuantity != 0) {
numTotalPrice = numQuantity * 4;
frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice);
successful = true;
}
else {
alert("Sorry must order more than 0");
successful = false;
}
return succesful;
}
</script>
Code: <form action="" onsubmit="return checkQuantity(this)" style="width: 193px">
<table cellpadding="4" style="width:111%">
<tr>
<td class="style1">
Quanity:</td>
<td class="formInputCell">
<input name="Quantity" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style1">
Total Price $
</td>
<td class="formInputCell">
<input name="TotalPrice" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style2"></td>
<td><input id="Submit1" type="submit"
value="Buy Now" class="buttonstyle" /></td>
</tr>
</table>
</form>
I've got this listbox full of hundreds of employee names. Clicking on a name executes a function using onchange. Because of the length of the list I decided a search function would be really handy and I finally found one that works. Now the search function, when you type in the input box, scrolls the list to the first matching entry. And that's good, that's what I wanted. The problem comes in when you try to click on the name the search function found. Nothing happens ofcourse because the onchange tag in the list reacts to changes, not direct clicks. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:260px; width:220px; margin-bottom: 15px;"> <option selected="selected">Loading</option> </select> The list is populated by java but for testing I disabled the function that clears the "Loading" option and I set it to selected. That way the loading option is highlighted by default and the search function is free to highlight something else, then when I click on the search result it works like it's supposed to. But keeping a highlighted option at the top of the list for that sole purpose isn't very elegant, especially since if you click on it the onchange function tries to execute and generates errors. The only solution I can think of is to use java to generate another option way at the bottom of the list that has the selected attribute but I don't quite know how to do that. Does anyone have any thoughts on what I can do? hello, I posted a threat a couple of days ago, but i got no answer. I guess it was just too messy. So i'm trying over again. You might therefore have a little deja vu, but still, any help will be greatly appreciated. I need this function to work on all my div, separately, on loading. here is the function: Code: <script>
// Random Position Script
var xxx = Math.floor(Math.random()* (pageWidth()-230));
var yyy = Math.floor(Math.random()* (pageHeight()-50));
function start()
{var x = (posLeft()+xxx) + 'px';
var y = (posTop()+yyy) + 'px';
moveObjTo('myobj',x,y);
setObjVis('myobj','visible');}
window.onload = start;
window.onscroll = start;// JavaScript Document
</script>
At the moment, the function is working on one object ('myObj'). I laced all my documents into separate divs and i need them all (and seperatly) to load on a random position at start. So i need to write in something that makes this function keep on going for all my objects. It might seem like a very dumb question, but 'm just starting with javascript, so not much of a coder yet. Hope you can help o this one. nice day to everybody! Hi, I have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs... Here is how I tried to do that: Code: <script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
targetElement.innerHTML = "" ;
}
</script>
Code: $hide = "";
while($ligne=mysql_fetch_array($ress)){
$hide.= "visibilite('$ligne[id]'); ";
$return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>";
$return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>";
$return.= "</div></td></tr>";
}
Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not... Does somebody can help me? Thanks a lot! Jeff Hi, I have a search function which works when I only want to have only one search per page, but as it involves a string call I'm not sure how to modify it to multiple search requests on a page. The below works fine for one call: Code: <script type="text/javascript">
function showHint(str){
if (str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getName.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<label>Search by name: </label>
<input type="text" id="txt1" class="input" onkeyup="showHint(this.value)" />
<br />
<p>Suggestions: <span id="txtHint"></span></p>
<br />
But if I want to do mulitple I have tried changing it to: Code: <script type="text/javascript">
function showHint(File,ID){
if (str.length==0){
document.getElementById(ID).innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",File,true);
xmlhttp.send();
}
</script>
</head>
<body>
<label>Search by firstname: </label>
<input type="text" id="txt1" class="input" onkeyup="showHint('GetFirstName.php?q='+str,'txtHint')" />
<br />
<p>Suggestions: <span id="txtHint"></span></p>
<br /> <label>Search by surname: </label>
<input type="text" id="txt1" class="input" onkeyup="showHint('getLastName.php?q='+str,'txtHintSn')" />
<br />
<p>Suggestions: <span id="txtHintSn"></span></p>
<br />
The above doesn't work and I am not sure what do about the showHint(str) as clearly I am not representing it properly in my attempt to modify the script. I'm probably missing something simple here. I have this function called display: function display(name3,office3,officePH3,mobile3,email3) { document.getElementById('viewer').src=('Location_Files/')+(office3)+('.htm') } It's supposed to take 5 values and do various things with them. When I only had one parameter it worked fine, it took an office number which was the value of a listbox option and turned it into a path and then pointed an iframe to that path. Then I changed it so the value of the listbox option was 5 parameters separated by commas. Here's the listbox now: <select onchange="display(this.value)" multiple="multiple" id="People" name="People" style="border-style: none; height:260px; width:220px;"> <option value="test name,1656,phone,NONE,email">Loading</option> </select> You can see display is executed as "display(this.value)" so in theory it should take "test name,1656,phone,NONE,email" as its parameters and it should accept 1656 as the "office3" parameter. For some reason it's not working out that way, the function executes and the iframe changes but I get an unable to display webpage message like the path is broken. Can anyone see what I'm doing wrong? Another homework assignment that I can't quite seem to get to work... I've been asked to do the following using javascript: -Create a function named randInt() with one parameter of "size". Declare a variable named "rNum" equal to a random integer between 1 and the value of the size variable. Return the value of the "rNum" varialbe from the function. -Create a function named getQuote() with one parameter anemd "qNum". The function should create an array named mtQuotes with five quotes; there should be no quote for the array index "0". Return the value of the mtQuotes array for the qNum index. - In the div element of "quotes" insert a script with the following commands: Declare a variable named "randValue" which is euqal to a random integer between 1 and 5 (use the randInt() function). Declare a variable named "quoteText" containing the quote whose array index value is equal to randValue. Write the value of quoteText to the web page. Here is what I have...it returns undefined. thanks. Code:
<html>
<head>
<script type="text/javascript">
function randInt(size) {
var rNum=Math.ceil(Math.random()*5);
return(rNum);
}
</script>
<script type="text/javascript">
function getQuote(qNum);
var mtQuotes = new Array();
mtQuotes[0] = "";
mtQuotes[1] = "I smoke in moderation, only one cigar at a time.";
mtQuotes[2] = "Be careful of reading health books, you might die of a misprint.";
mtQuotes[3] = "Man is the only animal that blushes or needs to.";
mtQuotes[4] = "Clothes make the man. Naked people have little or no influence on society.";
mtQuotes[5] = "One of the most striking differences between a cat and a lie is that a cat has only nine lives.";
return mtQuotes[qNum];
</script>
</head>
<body>
<div id="quotes">
<script type="text/javascript">
var randValue=randInt(5);
var quoteText=getQuote(randValue);
document.write(quoteText);
</script>
</div>
Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question. Here's what I'm trying to do. I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated. S First off I didn't know whether to post this here or in the PHP section since it deals with both, but mostly JS. I have a PHP scraper that scrapes the job title, company name and location from a website and stores them in separate arrays. These values are then extracted out one at a time from the array and stored into a string, that is then passed to a Google Maps API. I can make this successfully happen once, the thing is I need to do it multiple times. I have an idea on what I should do but don't really know how to implement it (correctly). The idea I had was to create a function in the JavaScript section that accepts three values from PHP. This function would be called in my PHP for loop that extracts the values from the array into a string. The thing that confuses me is that the Map function is called via <body onLoad="initialize()">. Here's the link to my code My problem is that i have multiple math calculations within different functions that have multiple switch statements that get calculated with an onclick="functionOne()" for each radio button and before i can calculate the outcome for some reason i must fully insert a value for every input as well as check every raidio button before i get to the end of my list. I wish to simply allow the user to fill out as many fields as he wishes leaving some bank without being restricted to do every single one.. Thank you in advance
Hi to All, I have a table that contains many rows, some in italian with code <td nome='riga_i'> and some in english with code <td name='row_e'>. I have created two buttons with different background flags: italy and uk, so when one pushes the button with flag uk, the html page will be reloaded with only english rows, and when one pushes the button with flag it, the same page is reloaded containing only italian rows. All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this. Here the code: <html> <head> <script type="text/javascript"> function toggle(name) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(name)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } // function toggle(nome) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(nome)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } </script> </head> <body onload="toggle('name');"> <table> <tr nome="riga_i"> <td>REQUISITI RELATVI AL SERVIZIO</td> <td> </td> <td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr> <tr name="row_e"> <td> </td> <td>REQUIREMENTS RELATED TO THE SERVICE</td> <td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr> .... .... and so on.... ..... </table></html> To better the code I have tried in this way but without success ... <html> <head> <script type="text/javascript"> function toggle(this) { if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } } </script> </head> Thanks in advance !!! The statement does what I want it to do, except if there is multiple instances of the word, it only outputs one, how can I work it so all instances are output in red? (while still using .slice) var phrase = prompt("Enter a messate: ", 'Message'); var searchFor = prompt("Enter search text: ", 's'); var matchPhrase = ""; var searchIndex = -1; /* if there's a match, create a text string by * add the phrase text from before the match, * add <font> tags around the match text, * add the rest of the phrase from after the match */ searchIndex = phrase.indexOf(searchFor); if (searchIndex >=0 ) { // Copy text from phrase up till the match. matchPhrase += phrase.slice(0, searchIndex); matchPhrase += '<font color="red">' + searchFor + '</font>'; matchPhrase += phrase.slice(searchIndex + searchFor.length); phrase++ } else { matchPhrase = "No matches" } document.writeln(matchPhrase); Reply With Quote 01-31-2015, 09:08 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Use a regular expression. |
|||||||