|
JavaScript - Help With Getelementbyid Or This And Array
Hi,
I am new to javascript. Been picking up bits and parts but am bumping my head against walls. Have table with 4 cols and 2 rows - header row and 2nd row with 3 input text boxes and 1 option list. Have an array to adds rows to table when user clicks button-max-3 more rows. Option list not a problem-propagates values. Row 1 - 1st and 2nd input boxes linked to JQuery for datapicker and 4th calls js validation for numeric input. When user adds row those links are not there-which is what I need. Array cites input boxes with name and iteration of +1 for each added row. Should I use, in the array, document.getElementById('startdate0'; document.getElementById('startdate1'); etc., or should I use keyword this? And if I use this, how is it applied? I do not know how to declare these variables for recognition. Tried several methods without success. Following is array: Code: <script language="Javascript" type="text/javascript">
/*<![CDATA[*/
var new_rows=new Array();
var row_count=0;
function addRow()
{
var tbl = document.getElementById('ReqDtTbl');
new_rows[row_count]=new Array();
var lastRow = tbl.rows.length;
var iteration = lastRow;
if (lastRow>4){
return;}
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createElement('input');
textNode.size = 7;
textNode.name = 'startdate' + iteration;
cellLeft.appendChild(textNode);
new_rows[row_count]['cell']=textNode;
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'enddate' + iteration;
el.id = 'enddate' + iteration;
el.size = 7;
new_rows[row_count]['cell2']=el;
cellRight.appendChild(el);
// the last cell!
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'TypeHrs' + iteration;
sel.options[0] = new Option('-Select-', '""');
sel.options[1] = new Option('Comp Time', 'Comp Time');
sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
sel.options[3] = new Option('Overtime', 'Overtime');
sel.options[4] = new Option('Rel Comp', 'Rel Comp');
cellRightSel.appendChild(sel);
new_rows[row_count]['cell3']=sel;
var cellRight = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.name = 'No. of Hours' + iteration;
el.id = 'No. of Hours' + iteration;
el.size = 7;
cellRight.appendChild(el);
new_rows[row_count]['cell']=el;
row_count++;
}
function removeRow()
{
// grab element again
var tbl = document.getElementById('ReqDtTbl');
// grab length
var lastRow = tbl.rows.length;
// delete last row if there is more than one row
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
/*]]>*/
</script>
Input box for date is: Code: <input style="width: 70px" type="text" id="startdate"> Function is: Code: <script type="text/javascript">
$(function() {
$("#startdate").datepicker();
$("#enddate").datepicker();
$("#RcompStart").datepicker();
$("#RcompEnd").datepicker();
});
</script>
Input for numeric is: Code: <input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" /> And numeric validation function is: Code: <script type="text/javascript">
function checkQuarters( fld )
{
var val = parseFloat(fld.value);
if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) )
{
alert("Value must be a numeric and a multiple of 0.25");
return false;
}
return true;
}
</script>
Thanks - John Similar TutorialsIn my program there is table which is retrieved and then there radio buttons, after selecting any radio button other columns get exapanded into textboxes to edit info. Now for expansion I have used div<id = > tag for each textbox and In javascript I have a function for showing textbox after clicking a radio button.In that I have used , arr.length=Length of the rows in table function edit1(el) { for(var i=0;i<arr.length;i++) { if(el.value==arr[i].value) { //document.getElementById("test[" + i + "]").value Not workking //document.getElementById('dname['+ i + ']').style.display = block"; Not working document.getElementById('dname').style.display = "block"; document.getElementById('dmarks').style.display = "block"; break; } else { document.getElementById('dname').style.display = "none"; document.getElementById('dmarks').style.display = "none"; } }//end for }//end if } In HTML, while($row1=mysql_fetch_array($rs1)) { echo "<tr>"; /*<td>44:<div id=d4 style="display:none;"><input type=text name=t4 id=idtext></div></td></tr><br>*/ ?> <td><input type="radio" name="select" value="<?php echo $row1['rollNo'];?>" onClick='updateRec(this);'><?php echo $row1['rollNo']; ?> <input type="radio" name="select" value="<?php echo $row1['rollNo'];?>" onClick='hiding(this);'>hide</td> <td><?php echo $row1['name']; ?><div id="dname[]" style="display:none;"><input type=text name="tname[]"></div></td> <td><?php echo $row1['marks']; ?><div id="dmarks[]" style="display:none;"><input type=text name="tmarks[]"></div></td> </tr><br> <?php } // end while ?> </table><br><br> Here I have to take array of div id's = "dname[]" but don't know the syntax for document.getElementById('dname').style.display = "block"; in which dname is array Plz help. Hi.. I have problem on how can I automatically display the output from the computation (Demanded Qty * Quantity), after or while I input Demanded Qty. I mean I input Demanded Qty, on below it will display the output also beside the SubItems. Sorry, if i post again my problem, because I have no idea on how can I solve this problem. here is my code: PHP Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); ?> <html> <title>Stock Requisition</title> <head> <link rel="stylesheet" type="text/css" href="kanban.css"> <script type="text/javascript"> function compute_quantity(){ var DemandedQty = document.getElementById('DemandedQty').value; var SubQty = document.getElementById('SubQty').value; var Quantity = document.getElementById('Quantity').value; SubQty = (DemandedQty * Quantity); } </script> </head> <body> <form name="stock_requisition" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div> <table> <thead> <th>Items</th> <th>Sub Items</th> <th>Item Code</th> <th>Demanded Qty</th> <th>UoM</th> <th>Class</th> <th>Description</th> <th>BIN Location</th> </thead> <?php $DemandedQty = $_POST['DemandedQty']; $sql = "SELECT DISTINCT Items FROM bom_subitems ORDER BY Items"; $res_bom = mysql_query($sql, $con); while($row = mysql_fetch_assoc($res_bom)){ $Items = $row['Items']; $Items_ = substr($Items, 12, 3); echo "<tr> <td style='border: none;font-weight: bold;'> <input type='name' value='$Items_' name='Items_[]' id='Items' readonly = 'readonly' style = 'border:none;width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border:none;'> </td> <td style='border:none;'> </td> <td style='border: none;'><center><input type='text' name='DemandedQty[]' id='DemandedQty' value='' size='12' onkeyup = compute_quantity()></center></td> </tr>"; $sql = "SELECT Items, SubItems, ItemCode, UoM, Class, Description, BINLocation, Quantity FROM bom_subitems WHERE Items = '$Items' ORDER BY Items"or die(mysql_error()); $res_sub = mysql_query($sql, $con); while($row_sub = mysql_fetch_assoc($res_sub)){ $Items1 = $row_sub['Items']; $SubItems = $row_sub['SubItems']; $ItemCode = $row_sub['ItemCode']; $UoM = $row_sub['UoM']; $Class = $row_sub['Class']; $Description = $row_sub['Description']; $BINLocation = $row_sub['BINLocation']; $Quantity = $row_sub['Quantity']; echo "<input type='hidden' name='Quantity' id='Quantity' value='$Quantity'>"; echo "<tr> <td style='border: none;'> <input type='hidden' value='$Items1' id='Items1' name='Items1[]'></td> <td style='border: none;'> <input type='text' name='SubItems[]' value='$SubItems' id='SubItems' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'> <input type='text' name='ItemCode[]' value='$ItemCode' id='ItemCode' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'><center><input type='text' name='SubQty[]' id='SubQty' value='' size='12' style></center></td> <td style='border: none;' size='3'> <input type='text' name='UoM[]' value='$UoM' id='UoM' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size='3'></td> <td style='border: none;'> <input type='text' name='Class[]' value='$Class' id='Class' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'> <input type='text' name='Description[]' value='$Description' id='Description' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size= '30'></td> <td style='border: none;'> <input type='text' name='BINLocation[]' value='$BINLocation' id='BINLocation' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> </tr>"; } } ?> </table> </div> </form> </body> </html> If you don't understand my issue feel free to ask me for further understanding. I'm sorry again I really need to solve this and i tried to google but I can't find the solution. Thank you so much hi, In my code below, I cannot get the setting_id value as it falls outside of the loop. I have just tried to put in the getElementById function but it's not working?! I get the error: missing ) after formal parameters JavaScript from this: Code: function confirmqualification(ID) {
to this: Code: function confirmqualification(document.getElementById('setting_id')) {
HTML from this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification('<?php echo $row1['setting_id']?>')" />
to this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification()" /> hi quick question, i have 640 hidden html inputs like this but with different names. <input type="hidden" name="b1r1c1" value"some value"> now i want to use document.getElementById('b1r1c1).value = "whatever"; will that work eventhough there is no id on my hidden value. it will be in a hta by the way. thanks Hello smart people... perhaps someone can figure this one out. I hope it's not a PHP question. I have a form and need to populate FIELD2 with the result of FIELD1. Field one is a dynamic list from a database, where the value is an ID#, but the list shows the name. I want to populat FIELD2 with the name that is chosen, not the id (I can't get anything to work) Here is the code from the 2 fields: FIELD 1: Code: <select name = "" realname = "{#role#}" required="1" exclude = "-1" id = "roleselect">
<option value="-1" selected="selected">Choose</option>
<option value = "{$roles[role].ID}" id="role{$roles[role].ID}">{$roles[role].name}</option>
FIELD 2: Code: <input type="hidden" name="rolename" id="rolename" required="0" realname="rolename" /> Here is the javascript I tried to populate field 2 with the selected option of field 2: Code: function updaterole(){
document.getElementById("rolename").value =document.getElementById("role").value;
I tried using name instead of value for field 1, but that didn't work either. The db just shows empty. thanks for any help! Hopefully some of you guys can help. I'm self taught in Javascript so only know little bits here and there (and don't even know if the thread title is labelled right for what I'm doing!) so help would be greatly appreciated. I'm trying to create 4 buttons on a page (buttons shown by "click here to view c1, c2" etc.) however after I've clicked one button and the content is showing below, the content from the next button clicked does not show (almost as if it is hidden underneath). I'm looking for a way of showing the content when the button is clicked, but hiding it once another button is clicked so other content is shown. Hopefully this is clear enough. All help, tips or advice will be appreciated. Thankyou. Code: <script type="text/javascript" language="JavaScript"><!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
}
else {
document.getElementById(tid).style.display = "none";
}
}
//--></script>
<table width="100%" cellspacing="4" cellpadding="4" border="0" align="center">
<tbody>
<tr>
<td width="25%"><a href="javascript:InsertContent('c1');"> Click to see C1</a></td>
<td width="25%"><a href="javascript:InsertContent('c2');"> Click to see C2</a></td>
<td width="25%"><a href="javascript:InsertContent('c3');"> Click to see C3</a></td>
<td width="25%"><a href="javascript:InsertContent('c4');"> Click to see C4</a></td>
</tr>
</tbody>
</table>
<hr />
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c1">CONTENT C1
</div>
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c2">CONTENT C2
</div>
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c3">CONTENT C3
</div>
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c4">CONTENT C3
</div>
I have some simple javascript code that works fine in chrome and safari, but not Ie8 Code: <head><script type="text/javascript">
function val2() {
//var num = Number(document.getElementById('PdRows').value)
alert (document.getElementById('PdRows').value)
}
</script></head>
<form action="" method="post">
<select name="PD" id="PdRows" onchange="val2()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
Why? And how do I correct? All, I have the following code: Code: var poststr = "statusupdate=" + encodeURI( document.getElementById("statusupdate").value ) +
"&user_name=" + encodeURI( document.getElementById("user_name").value ) +
"&twitteryes=" + encodeURI ( document.getElementById("twitteryes").checked ) +
"¤tstatus=" + encodeURI( document.getElementById("currentstatus").value );
It seems to be failing on the Code: "&twitteryes=" + encodeURI (document.getElementById("twitteryes").checked )
If I remove the part I just showed it works fine. This is the HTML code: Code: <input type="checkbox" name="twitteryes" value="yesplease" /> Thanks in advance. Any help would be greatly appreciated! I'm using javascript to create a slideshow of images with thumbnails. The slideshow works fine, the titles show up great, but my problem arises when I try to replace the href source of a div. [larger], specified in the js is supposed to be replacing the current a href source, but it isn't working. This is the javascript that controls the slideshow: Code: var current = 0;
function swapimg( show ){
var piece = new Array();
var title = new Array();
var larger = new Array();
var meta = new Array();
piece[0] = '../assets/images/nokia/nokia01.jpg';
title[0] = '[ One ]';
larger[0] = '../assets/images/nokia/nokia01_big.jpg';
piece[1] = '../images/nokia/nokia02.png';
title[1] = '[ Two ]';
larger[1] = '../assets/images/nokia/nokia02_big.jpg';
piece[2] = '../assets/images/nokia/nokia03.png';
title[2] = '[ Three ]';
larger[2] = '../assets/images/nokia/nokia02_big.jpg';
piece[3] = '../assets/images/nokia/nokia04.png';
title[3] = '[ Four ]';
larger[3] = '../assets/images/nokia/nokia02_big.jpg';
document.getElementById( 'featured' ).src = piece[show];
document.getElementById( 'featured' ).alt = title[show];
document.getElementById( 'featuretitle' ).innerHTML = title[show];
document.getElementById( 'featuremeta' ).innerHTML = meta[show];
document.getElementById( 'featurelarger' ).href = larger[show];
for( i = 0; i < meta.length; i++ ){
document.getElementById( 'item' + i ).style.opacity = '.5';
}
document.getElementById( 'item' + ( show ) ).style.opacity = '.99';
current = ( show );
}
And this is the portion of the html that is supposed to be working with the [larger], but I'm having troubles with: Code: <div class="featurelarger"><a href="../assets/images/nokia/nokia01_big.jpg" id="featurelarger" class="thickbox" title="Windowcling" rel="gallery-art" >view larger</a></div> Any help would be greatly appreciated, thank you in advance! Hi. I'm making a web site...And the following bit of code doesn't work...It sais "document.getElementById(...) is null or not an object"...I tried various combinations of getElementById and getElementsByName but nothing works...Any help is very much appreciated. Thanks. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rudolf-site management</title>
<script language="javascript">
<!--
function Val_imag(){
if(document.site.Imagini[0].checked){
for(var i=0; i<16; i++){
document.getElementById('Fs_img')[i].style.display='none'
document.getElementById('Txt_img')[i].style.display='none'}}
else{
if(document.site.Imagini[1].checked){
for(var i=0; i<16; i++){
document.getElementById('Txt_img')[i].style.display='none'}
document.getElementById('Fs_img0').style.display=''}
else{
if(document.site.Imagini[2].checked){
for(var i=0; i<16; i++){
document.getElementById('Fs_img')[i].style.display='none'}
document.getElementById('Txt_img0').style.display=''}
else{
for(var i=0; i<16; i++){
document.getElementById('Fs_img')[i].style.display='none'
document.getElementById('Txt_img')[i].style.display='none'}}}}}
function Cont_pag3(){
if(document.site.Imagini[0].checked){
document.site.pag3_5.disabled=false}
else{
if(document.site.Imagini[1].checked){
if(document.site.Fis_img[0].value!=""){
document.site.pag3_5.disabled=false}
else{
document.site.pag3_5.disabled=true}}
else{
if(document.site.Imagini[2].checked){
if(document.site.Text_img[0].value.length>7){
document.site.pag3_5.disabled=false}
else{
document.site.pag3_5.disabled=true}}}}}
// -->
</script>
</head>
<body bgcolor=#000437>
<font color=#FDB91A>
<form method="post" name="site" action="site.php" enctype="multipart/form-data">
<div id="pagina3" class="comanda">
Pasul III: Imagini<br/>
Pentru a trimite imaginile care vor aparea pe site (daca exista), aveti 2 optiuni: sa ne trimiteti un fisier .zip, .rar, etc sau sa scrieti un link unde le vom putea gasi.<br/><br/>
Le puteti organiza cum doriti dumneavostra, dar este preferabil sa folositi una dintre variantele urmatoa <br/><br/>
(folder) pagina 1: (folder) pagina 1-1: imaginile care apar pe pagina 1-1<br/>
<table style="color=#FDB91A"><tr><td width="155"></td><td width="250">imaginile care apar pe pagina 1 etc</td></tr></table><br/><br/>
(folder) pagina 1: imaginile care apar pe pagina 1<br/>
(folder) pagina 1-1: imaginile care apar pe pagina 1-1 etc<br/><br/>
(folder - nu este necesar) site: toate imaginile care apar pe site<br/>
<table style="color=#FDB91A"><tr><td width="200"></td><td width="250">fisier text (.txt, .doc, .docx etc) cu numele imaginilor si pagina pe care apar</td></tr></table><br/><br/>
La toate exemplele, in loc de pagina 1 etc puteti scrie numele paginii.<br/>
Puteti adauga pana la 10 fisiere si pana la 15 link-uri. Pentru a adauga inca un fisier/link apasati pe butonul corespunzator.<br/>
Va rugam ca fisierele trimise sa fie de maximum 5 MB. (Puteti downloada si instala gratuit <a href="http://www.rarlab.com/download.htm" target="_blank">WinRar</a> si sa-l folositi pentru a face o arhiva impartita in mai multe bucati.)<br/><br/>
<input type="radio" name="Imagini" value="NuAm" onClick="Val_imag();Cont_pag3()">Site-ul nu are imagini<br/>
<input type="radio" name="Imagini" value="Fisier" onClick="Val_imag();Cont_pag3()">Trimite fisier<br/>
<table id="Fs_img0" style="display: none"><tr><td><input type="file" name="Fis_img" size="100" onChange="Cont_pag3()"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img1').style.display=''"></td></tr></table>
<table id="Fs_img1" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img2').style.display=''"></td></tr></table>
<table id="Fs_img2" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img3').style.display=''"></td></tr></table>
<table id="Fs_img3" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img4').style.display=''"></td></tr></table>
<table id="Fs_img4" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img5').style.display=''"></td></tr></table>
<table id="Fs_img5" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img6').style.display=''"></td></tr></table>
<table id="Fs_img6" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img7').style.display=''"></td></tr></table>
<table id="Fs_img7" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img8').style.display=''"></td></tr></table>
<table id="Fs_img8" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img9').style.display=''"></td></tr></table>
<table id="Fs_img9" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img10').style.display=''"></td></tr></table>
<table id="Fs_img10" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img11').style.display=''"></td></tr></table>
<table id="Fs_img11" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img12').style.display=''"></td></tr></table>
<table id="Fs_img12" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img13').style.display=''"></td></tr></table>
<table id="Fs_img13" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img14').style.display=''"></td></tr></table>
<table id="Fs_img14" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img15').style.display=''"></td></tr></table>
<table id="Fs_img15" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td></tr></table>
<input type="radio" name="Imagini" value="Text" onClick="Val_imag();Cont_pag3()">Scrie/copiaza link-ul<br/>
<table id="Txt_img0" style="display: none"><tr><td><input type="text" name="Text_img" size="80" onKeyUp="Cont_pag3()"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img1').style.display=''"></td></tr></table>
<table id="Txt_img1" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img2').style.display=''"></td></tr></table>
<table id="Txt_img2" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img3').style.display=''"></td></tr></table>
<table id="Txt_img3" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img4').style.display=''"></td></tr></table>
<table id="Txt_img4" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img5').style.display=''"></td></tr></table>
<table id="Txt_img5" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img6').style.display=''"></td></tr></table>
<table id="Txt_img6" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img7').style.display=''"></td></tr></table>
<table id="Txt_img7" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img8').style.display=''"></td></tr></table>
<table id="Txt_img8" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img9').style.display=''"></td></tr></table>
<table id="Txt_img9" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img10').style.display=''"></td></tr></table>
<table id="Txt_img10" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img11').style.display=''"></td></tr></table>
<table id="Txt_img11" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img12').style.display=''"></td></tr></table>
<table id="Txt_img12" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img13').style.display=''"></td></tr></table>
<table id="Txt_img13" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img14').style.display=''"></td></tr></table>
<table id="Txt_img14" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img15').style.display=''"></td></tr></table>
<table id="Txt_img15" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td></tr></table><br/>
Observatii:<br/>
Daca aveti observatii/idei legate de imagini (amplasare, contur, text etc), le puteti scrie aici.<br/>
Nu este un camp obligatoriu.<br/>
<textarea name="Obs_img" cols="80" rows="7"></textarea><br/><br/><br/><br/>
<input type="button" name="pag2_1" value="Pagina precedenta">    
<input type="button" name="pag3_5" value="Continua comanda" disabled=true>
</div>
PS1: this code worked in firefox PS2: sorry for posting such a long code... Hello, Javascript newbie question. I am trying to write into <p> tags using getElementById(), instead of document.write() which I commented out but it does not work the way I put it. Thanks a lot if you can instruct me! Code: <html>
<body>
<script type="text/javascript">
var x;
var mycolors = new Array();
mycolors[0] = "blue";
mycolors[1] = "orange";
mycolors[2] = "green";
for (x=0; x<mycolors.length; x++)
{
var output = mycolors[x] + "<br />"
document.getElementById("output").innerHTML=output; //instead of document.write(output);
}
</script>
<p id="output"></>
</body>
</html>
None of my getElementById (or other) references produce anything but "undefined." This occurs in the latest versions of Fx, IE, Chrome, and Safari, so it must be something I am doing but not not seeing here. I have boiled it down to the following without success, and wonder whether there is some add on interaction. Fx 3.6.12 has the problem with this code: <code> <html> <head> <title>This is a test of getElementById</title> </head> <body> <div id="area" name="area_name">xxx</div> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); var msg = ''; msg = 'Divs[0] contains ' + divs[0] + ' with width = ' + divs[0].width + "\n"; msg +='Test area width by id = ' + document.getElementById('area').width + "\n"; msg +='Test area width by name = ' + document.getElementsByName('area_name').width; alert(msg); </script> </body> </html> </code> Hi Everybody, I'd be grateful if you could help me out. I need to change the CSS by changing the id when a link is clicked. The id is in the body tag and by default it is named 'first'. i.e <body id="first">. If I click on the link named 'Change id to Second', this should change to <body id="Second">. If I further click on the link named "Change id to Second" this should change to <body id="Third">. My code below works (I have stripped this down to make sense), but only when I click one of the links for the first time. If I am to click the second/ third link, nothing happens: Code: <html>
<head>
<script type="text/javascript">
function changeFirst() {
document.getElementById('blanky').id = 'first';
document.getElementById('second').id = 'first';
document.getElementById('third').id = 'first';
}
function changeSecond() {
document.getElementById('blanky').id = 'second';
document.getElementById('first').id = 'second';
document.getElementById('third').id = 'second';
}
function changeThird() {
document.getElementById('blanky').id = 'third';
document.getElementById('first').id = 'third';
document.getElementById('second').id = 'third';
}
</script>
</head>
<body id=first><!-- I need to change this id -->
<p>Hello, the id above should change when the following links are clicked</p>
<a onclick="changeFirst()">Change id to First</a>
<a onclick="changeSecond()">Change id to Second</a>
<a onclick="changeThird()">Change id to Third</a>
</body>
</html>
Any help will be greatly appreciated. Cheers I have a html file and a separate javascript file. The html file contains: <input type="reset" id = "resetButton" /> I want a message to pop up if the reset button is pressed. So in the js file I have: document.getElementById("resetButton").onclick = doAlert; doAlert is a function that simply does: alert("Do you want to reset?"); I know my separate js file is linked correctly because if I just put in alert("hello"); in the js file then it works. But if I use the document.getElementById thing in the js file, then there is an error. The error, according to the error console, says that "resetButton" is null. Can someone help me? thanks! btw, I'm totally new to programming...and I need to do this for my homework assignment why is getElementById not working?? pls try it and tell me if you get a hit on document.getElementById("t1"); thanks Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tester code</title>
<script type="text/javascript">
console.log("sfsg");
var e = document.getElementById("t1");
var c = e.firstChild;
console.log(c);
</script>
</head>
<body>
<table>
<tr>
<td id="t1"><img id="img1" src="SharkSq1.png">3</td>
</tr>
</table>
</body>
</html>
Hey guys, Thanks for taking the time to read my post. I am not new to programming or scripting, but I am completely new to javascript and web-based code. Hopefully you guys could help me understand what is going on and maybe help me figure out what I am trying to do. What I am trying to do: -There is an element that has a value <td class="flashField" onmouseover="clearAnswer()"> <div id="flashAnswer" onmouseover="clearAnswer()">answer string here</div> </td> -There is a text box that needs to have the answer above given to it <td class="flashField"> <input type="text" tabindex="1" onkeypress="clearAnswer()" name="q" maxlength="256" size="50"> </td> -There is a next button that needs to be executed <td align="right"> <input type="image" tabindex="2" alt="Next" src="http://website.com/images/next.gif"> </td> So what I am trying to do is create a script through Greasemonkey that will automatically do these things. I am starting small and trying to just get the value of flashAnswer to appear as an alert on the screen by using this code: var answer = document.getElementById('flashAnswer'); alert(answer); But the problem is it posts some weird value ([object XrayWrapper [object HTMLDivElement]]) that most definitely is not "answer string here" and is a bit above me at this point. Any ideas? Any help would be great guys! Thanks! -ellosiph Hello. I'm trying to change the text on my page dynamically using getElementById etc. Just not quite sure how to do it. Code: <script>
function changeIt() {
document.getElementById('change').innerHTML = '*i want the stuff below here (from 'var' to 'text')*';
}
var Result= ((correct / 5) * 100) + '%';
document.write('<p>Result<b>' + score + '</b></p>');
document.write('<p>some text</p>');
</script>
//
<div id = "change">
*all the info I'm going to replace*
</div>
Just need to know how to put the variables and stuff in the 'innerhtml' part? Thanks. I am writing some javascript that when the user clicks on a link, it hides or displays content inside a div tag. I have been trying to add some code that would only allow for one div tag to be displayed at a time. Here is where I originally got the code (http://www.willmaster.com/library/hi...-to-reveal.php) Whenever I run this code I get this error: Code: Error: document.getElementById(months[x]) is null Source File: /resources/default.js Line: 30 This is the JavaScript that runs when the user clicks the link: Code: <!--
function accordion(tid) {
var x;
var months = new Array();
months[0]="January";
months[1]="February";
months[2]="March";
months[3]="April";
months[4]="May";
months[5]="June";
months[6]="July";
months[7]="August";
months[8]="September";
months[9]="October";
months[10]="November";
months[11]="December";
for (x in months) {
document.getElementById((months[x])).style.display = "none";
}
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
} else {
document.getElementById(tid).style.display = "none";
}}
//-->
Here is where the javascript is activated from PHP Code: <a href=javascript:accordion('$month2');>$month2</a><br /> <div id='$month2' style='display: none';> Hello $month2 </div> Hi, quick question: Code: function x() {
document.getElementById('myid').width += 200;
}
This works for "myid", but my document contains "myid1", "myid2", "myid3", and so forth. How can I alter the script to effect every instance of "myid" followed by a number? I am trying to alter Playa to use input type images instead of buttons. Part of this involves the need for a rollover image eg. a play button highlights when the cursor is over it. This is the code I have: Code: if (Playa.btnState == "Stop") {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/stophover.gif'"
document.getElementById("btnPlayStop").onmouseout = "this.src='images/stop.gif'";
}
else {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/playhover.gif'";
document.getElementById("btnPlayStop").onmouseout = "this.src='images/play.gif'";
}
<input type="image" src="images/stop.gif" onmouseover="this.src='images/stophover.gif'" onmouseout="this.src='images/stop.gif'" alt="Stop" id="btnPlayStop" onclick="Playa.doPlayStop();" />
Playa.btnState is the alt tag to say whether the state is stopped or started. I have the code working to alternate between "Play" and "Stop" images when the button is clicked, but the rollover doesn't happen. Any ideas? Thanks |
|||||||