JavaScript - Text Manipulation Issues

I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each.

http://jsfiddle.net/defencedog/Zz7cX/

[My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine]

regards;;

I have the following code for a textbox that is supposed to change itself to 20 if the entered value is over 20, to 1 if it's less than 1, and round itself to the nearest integer

Code:

<input type="text" size="1" name="blevel" value="1" onchange='
document.unitselect.blevel.value++;
document.unitselect.blevel.value--;
document.unitselect.blevel.value = document.unitselect.blevel.value / 1
Math.floor(document.unitselect.blevel.value);
if(document.unitselect.blevel.value > 20){
	document.unitselect.blevel.value = 20
}else if(document.unitselect.blevel.value < 1){
	document.unitselect.blevel.value = 1
}
'>

The textbox is in a form named "unitselect". For some reason, it just ignores the Math.floor line. After experimenting for a bit, I found out that it was treating the textbox value as a string. I tried both using the increment/decrement operators and dividing it by 1. Although the operations executed properly, it still treated it as a string after the operations. Does anyone know what I can do to round this value?

Hi,

I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image.

I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree...

Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated.

Hello,

I am trying to get an image to change based on a date range within an array, then display that image on a webpage, if there is no corresponding date, then display a default image.

I have NEVER coded in JavaScript and need some assistance with this.

Here is the array example:

Code:

var holiday = new Array()
	holiday[0] = "images/bronc.jpg"
	holiday[1] = "0210, 0214, images/Valentines_Pic.jpg"
	holiday[2] = "0317, 0317, images/St-Patrics_Day.jpg"
	holiday[3] = "0701, 0704, images/4th_Of_July.jpg"
	holiday[4] = "1015, 1031, images/Halloween.jpg"
	holiday[5] = "1111, 1130, images/Thanks_Giving.jpg"
	holiday[6] = "1201, 1227, images/Christmas.jpg"
	holiday[7] = "9999, 9999, images/New_Years_Pic.jpg"

holiday[0] would be the default image that would display if no other images fall in the date range at the begining of each array element.

Then something like

get date
alter date to be mmdd
if date >= firstarraydate and date <= secondarraydate
then set image to ********.jpg
else set image to *******.jpg
loop

then in the body display the correct image

<p><img src="image" /></p>

Or something simple like that. I have searched and cannot find anything simple like that. I have tried a few available scripts for rotating banners but they always either do not work at all or they use one specific date or time and since I am not too swift with javascript, any help would be greatly appreiated.

Thanks
Kel

Hello everyone,

I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error.

Thanks in advance,

Alex

Code(JS):
Code:

function runstuff() {
	canvasthing = document.getElementById('1');
	context = canvasthing.getContext('2d');
	purple = new Image();
	purple.src = 'img/buttonpurple.png';
	purple.onload = function() {
    context.drawImage('purple', 0, 0);
	};
	context.font = '16px Vani';
	context.textBaseline = 'top';
	context.fillText('Test', 26, 24);
}

Code(html):
Code:

<!doctype html>
<html lang="en">
	<head>
		<title>POB.G</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="script.js">
		</script>
	</head>
	<body onload="runstuff()">
	<canvas id="1" width="127" height="128"></canvas>
	</body>
</html>

Error:
Code:

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7"  data: no]

Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!!

Here is the Code:

Code:

	function getEl(element)
		{
			var object = null;
			if (document.layers)
				{
					object = document.layers[element];
				}
			else if (document.all)
				{
					object = document.all[element];
				}
			else if (document.getElementById)
				{
					object = document.getElementById(element);
				}
			return object;
		}
		
function addRow()
{
  var tbl = getEl('invTbl');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  var cellqty = row.insertCell(0);
  var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
  cellqty.appendChild(qty);
  
  var cellitm = row.insertCell(1);
  var itm = document.createElement('input');
  itm.type = 'text';
  itm.name = 'itm_' + iteration;
  itm.id = 'itm_' + iteration;
  itm.size = 30;
  cellitm.appendChild(itm);
  
  var celldsc = row.insertCell(2);
  var dsc = document.createElement('input');
  dsc.type = 'text';
  dsc.name = 'dsc_' + iteration;
  dsc.id = 'dsc_' + iteration;
  dsc.size = 50;
  dsc.value = iteration;
  celldsc.appendChild(dsc);
  
  var cellprc = row.insertCell(3);
  var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
  cellprc.appendChild(prc);
  
  var celldel = row.insertCell(4);
  var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
  celldel.appendChild(del);

}

function removeRow(row)
{

	alert("you are deleting row " + parseInt(row));
	tbl = getEl('invTbl');
	rowTotal = tbl.rows.length;
	alert("there are " + rowTotal + " rows!");
	tbl.deleteRow(parseInt(row));	
	for ( i = 1; i < rowTotal; i++ )
		{
		if ( i > parseInt(row) )
			{
			place = i - 1;
			alert(i + " becomes " + place);
			qtycontainer = "qty_" + i;
			itmcontainer = "itm_" + i;
			dsccontainer = "dsc_" + i;
			prccontainer = "prc_" + i;
			delcontainer = i.toString();
			buttonchange = place.toString();
			
			getEl(qtycontainer).name = 'qty_' + place;
			getEl(qtycontainer).id = 'qty_' + place;
	
			getEl(itmcontainer).name = 'itm_' + place;
			getEl(itmcontainer).id = 'itm_' + place;
			
			getEl(dsccontainer).name = 'dsc_' + place;
			getEl(dsccontainer).id = 'dsc_' + place;
			getEl('dsc_'+place).value = getEl('dsc_'+place).id;
			
			getEl(prccontainer).name = 'prc_' + place;
			getEl(prccontainer).id = 'prc_' + place;
			
			getEl(delcontainer).name = buttonchange;
			getEl(delcontainer).id = buttonchange;
			alert("del button changed to " + getEl(i).id);
			}
		}
//	updatePrice();
}

The button element for each row calls javascript:removeRow(this.id);

Please help me figure out what I am doing wrong!

As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page.

For Example:

Input- 512

Output - Austin, TX

The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks!

Hi,

I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked.

Any help would be appreciated!

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.

Hi,
I have a form setup so that selecting a radio button opens a specific text field. The problem is if the user starts to enter information, then switches to a different radio button (perhaps they chose the wrong radio to start), the text they already started to enter on the previous textfield doesn't get cleared. This will be a problem later when inserting to sql.

Here is a summary of the code:

Code:

<head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){
document.getElementById("textbox").style.display='block'; 
}
else{
document.getElementById("textbox").style.display='none'; 
}
if (objRad.value=="1"){
document.getElementById("textbox1").style.display='block'; 
}
else{
document.getElementById("textbox1").style.display='none'; 
}
if (objRad.value=="2"){
document.getElementById("textbox2").style.display='block';
}
else{
document.getElementById("textbox2").style.display='none';
}
}
</script>
</head>
<body>

<form action="insert.php" method="post">
<p>Please choose the business type:
<input type="radio" name="rad" value="0" onclick="doClick(this)">
Sole Proprietorship
<input type="radio" name="rad" value="1" onclick="doClick(this)">
Partnership
<input type="radio" name="rad" value="2" onclick="doClick(this)">
Corporation

<div id="textbox" style="display:none">
<input type="text" name="txt">
This is my sole proprietorship info.</div>
<div id="textbox1" style="display:none">
<input type="text" name="txt">
This is my partnership info.</div>
<div id="textbox2" style="display:none">
<input type="text" name="txt">This is my corporation info.
</div>
</form>
</body>

Any help is appreciated,
Thanks in advance!

Hello.

I have a textarea where user can select a text then copy to clipboard (using EditArea script for highlighting)
I need append additional information to the selected text so it won't be visible in the textarea, but only appear after copied to clipboard.
For example:
Code:

text line one
text line two
text line three

user selected word "two", hit CTRL+C to copy into clipboard (or used browser's context menu), but in clipboard it should be saved as: "selected word 'two'"

What would be the approach?

Thank you.

Hi,

Here's a sample form:

Code:

<form action="#" method="post">
Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
<input type="submit" value="Send"> 
</form>

When you tab to a text input, the value gets highlighted. How can it be disabled?

Any help is appreciated!
Mike

Hello there, this is my first post on this forum.

I have learned a good bit of PHP and have implemented it for use in my work as a math tutor.

My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper.

I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met.

For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct.

The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically.

Code:

<SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
if(fldobj.value.length>3)
{document.forms[0].elements[nbox].focus()}
}
</SCRIPT>
</head>
<body onLoad="document.myform.txt1.focus()">
<CENTER>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">

Thank you for the help.

im clueless when it comes to javascript, but this is what im trying to find:

i have a page that has multiple text areas, i also have 4 links that when clicked i want to add some predefined text into the active text area the one with the text cursor in?

The Hyperlinks:
Code:

<a href="#sc">Shift Changed</a> | <a href="#ol">On Leave</a> | <a href="#ot">OverTime</a> | <a href="#ss">ShiftSwap</a>

The textareas:
PHP Code:
                <td><textarea name=details$i rows=4 align=absmiddle cols=16 value="$details[$i]\">$details[$i]</textarea></td> 


as you can see the textareas are created on the fly based on a php array.

would anyone be willing to put some code together for this?
or even give me the basics on how i can get the active textarea's name so i can pass that to a script that inserts into a given field?

Hi,

I'm hoping this will be an easy one for you experts out there.

I am working on a convention registration form.

What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field.

If the text in the NAME field is deleted, the "50.00" should also be deleted.

Does anyone have a script that does this?

Thanks!