|
JavaScript - Javascript Button Issues
Hey everyone I want to go ahead and say my issue with javascript is in a homework assignment so...I'm just looking to get more of a nudge in the right direction of how to fix this issue than anything ^^' I'm not asking to have the code fixed for me. I've been assigned to code a simple currency converter of just US dollars to a few other kinds of currency. I have most of the basic stuff done, I used an example piece of javascript and am editing it to try and make it into what I need. I'm just having issues with the button that is supposed to run the function and output the value of the currency, I can't seem to get the button to work. Here is the code I've gotten so far, if someone could just point out maybe where the issue is as sort of a hint I'd be really grateful!
Code: <html>
<head>
<title>Currency Converter</title>
<script type = "text/javascript">
function calcvalue() {
if (CurrencyType == "USDollars")
{price = 1;}
if (CurrencyType == "BritishPounds")
{price = 0.632766;}
if (CurrencyType == "Euros")
{price = '.709723';}
if (CurrencyType == "CanadianDollars")
{price = 0.970476;}
if (CurrencyType == "JapaneeseYen")
{price = 83.073;}
if (CurrencyType == "ChineeseYuan")
{price = 6.55649;
Currency.answer.value=price*DollarAmount;
}
if (!( DollarAmount >= 1001 || DollarAmount <= 0))
{
alert ("Please Enter a value between 1 and 1000");
return;
}
}
</script>
<body>
<body bgcolor="CCCCFF">
<form name="Currency">
<center>
<table>
<tr>
<td>Currency Type: </td>
<td>
<select name="Currency">
<option value="USDollars">US Dollars</option>
<option value="BritishPounds">British Pounds</option>
<option value="Euros">Euros</option>
<option value="CanadianDollars">Canadian Dollars</option>
<option value="JapaneeseYen">Japaneese Yen</option>
<option value="ChineeseYuan">Chineese Yuan</option>
</select>
<tr>
<td>Dollar Amount</td>
<td> $<input type=parsefloat() value="1" name="DollarAmount" size=3></td>
</tr>
<tr>
<td> </td>
<td><p class="submit">
<input type=button value="Convert" onclick=calcvalue()></p></td>
</tr>
<tr>
<td>value:</td>
<td><input type=text size=6 name="answer"><td>
</tr>
</table>
</center>
</form>
</body>
</html>
Similar TutorialsHey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? Dear All, The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script language="javascript"> function enable_text(status) { status=status; var form = document.forms[0]; var rads = form.elements.radio1; for (var i=0; i < rads.length; i++) { var color = rads[i].checked? "red" : ""; document.getElementById("check"+i).style.backgroundColor = color; document.getElementById("check"+i).disabled = status; } } </script> <body onload=enable_text(false);> <div> <form name="form1" method="post" action=""> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td class="PortletText1" nowrap><strong>ALL Data</strong></td> <td class="PortletText1" nowrap><strong>YES</strong></td> <td class="PortletText1" nowrap><strong>NO</strong></td> <td class="PortletText1" nowrap><strong>N/A</strong></td> <td class="PortletText1" nowrap><strong>Comments</strong></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="PortletText1" nowrap>Data 1:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td> <td class="PortletText1" nowrap> <input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 2:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 3:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td> </tr> <tr> </div> </form> </body> </html> </body> </html> thanks in advance. Regards sona Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks When I enter the data into my form then submit it, it is supposed to be inserted into my MySql database but I get the following error: "Unable to save data to database: Incorrect date value: '3-31-2001' for column 'sent_date' at row 1" The sent_date field is the first date field the user types in. The TYPE for this field in the MySql database is set to DATE. Any ideas what is going on? I think the problem is in my javascript but can't find the problem... _________________________________________________________ Below is the javascript code _________________________________________________________ <script type="text/javascript"> var valid; function dcheck(form) { var a = form.assgn_date.value; var s = form.sent_date.value; var i = form.interv_date.value; var dr = form.due_rev.value var su = form.due_suspo var clk = form.due_clerk var att = form.due_attny var jdg = form.due_judge var assn = new Date(a); var sent = new Date(s); var intv = new Date(i); var due_rev = new Date(dr); var due_suspo = new Date(su); var due_clerk = new Date(clk); var due_attny = new Date(att); var due_judge = new Date(jdg); if (isNaN(sent)) { sent = new Date(assn.getFullYear(),assn.getMonth(),assn.getDate()-7); } if (isNaN(due_rev)) { due_rev = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-42); } if (isNaN(due_suspo)) { due_suspo = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-40); } if (isNaN(due_clerk)) { due_clerk = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-38); } if (isNaN(due_attny)) { due_attny = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-36); } if (isNaN(due_judge)) { due_judge = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-7); } form.sent_date.value = (sent.getMonth()+1) + "-" + sent.getDate() + "-" + sent.getFullYear(); form.due_rev.value = (due_rev.getMonth()+1) + "-" + due_rev.getDate() + "-" + due_rev.getFullYear(); form.due_suspo.value = (due_suspo.getMonth()+1) + "-" + due_suspo.getDate() + "-" + due_suspo.getFullYear(); form.due_clerk.value = (due_clerk.getMonth()+1) + "-" + due_clerk.getDate() + "-" + due_clerk.getFullYear(); form.due_attny.value = (due_attny.getMonth()+1) + "-" + due_attny.getDate() + "-" + due_attny.getFullYear(); form.due_judge.value = (due_judge.getMonth()+1) + "-" + due_judge.getDate() + "-" + due_judge.getFullYear(); return true; } </script> I am having trouble with javascript:void(0) when using IE The website URL is: http://gerritygroup.com.s136675.grid...wn-center.html When you click on the map link it should open up the map on the same page but instead it shows an empty white box. For whatever reason it wont open the imbed map code when using javascript:void(0) in my a tag. This site was built in MODX and seems to be working fine in all other browsers. Firefox, Safari and Chrome. Please let me know if you have any other ideas that will get this map opening again in IE. I need to allow a user to enter 3 values, then display the average between them... I am having some real issues with the average, Thanks! var quiz1 = prompt("What is the score of your first quiz?", "") document.write("Return Value: "+quiz1, '%',("<br />")); var quiz2 = prompt("What is the score of your second quiz?", "") document.write("Return Value: "+quiz2, '%',("<br />")); var quiz3 = prompt("What is the score of your third quiz?", "") document.write("Return Value: "+quiz3,'%',("<br />")); average= ("quiz1"+"quiz2"+"quiz3") /3 document.write(average,("<br />")); I have a few java events attached to a couple rollover buttons. They seem to all work just great on every browser but ie8 for some reason. Code: <script type="text/javascript"src="lookbook_web/mouseovers.js">
<div id="thumb_container">
<div id="thumb1"><a href="javascript:void()"onmouseover="ShowPage('fra me1')"onclick="ShowPage('frame1')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a href="javascript:void()"onmouseover="ShowPage('fra me2')"onclick="ShowPage('frame2')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a href="javascript:void()"onmouseover="ShowPage('fra me3')"onclick="ShowPage('frame3')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
And then the mouseovers.js file looks like this (this is just a script i found online and edited so my guess is that the issue is here): Code: function ShowPage(frame1)
//Display in the i-frame, the page whose name is aName
{
{
frames[0].location = frame1+'.html'
}
function ShowPage(frame2)
//Display in the i-frame, the page whose name is aName
{
frames[0].location = frame2+'.html'
}
function ShowPage(frame3)
//Display in the i-frame, the page whose name is aName
{
frames[0].location = frame3+'.html'
}
}
Like i said, works on ffox, safari, ie7, chrome.. so im sort of at a loss. Ideas? Hello all, first time poster. I recently found this site as I was searching for topics to possibly help me fix my issue. So, without further ado: I've been working on a website for a grass roots Senate hopeful in Colorado, and I was asked to create a bit of interactivity into the site. Now, I'm well versed in XHTML/CSS, but I'm still a fledgling JavaScript writer. I was able to create a set of code that would allow for this to happen: 1.) A person would click on a link in a list of questions. 2.) That question's text would appear in a box on the right. 3.) Below the text from #2, a YouTube video would show using YouTube's embed code. Now, the bit of code was working perfectly and doing exactly what I ask it to. Except, the problem is it for some reason only works for the first and second question, and even though it shows a link for the third question it will not allow you to click on it and this whole thing is killing my brain. I've attempted to debug the code myself, but Firebug and the Mozilla Console show that no errors are running, and since I can't actually click on the link to even see if it would give me an error I'm completely stumped. I've cleared the code out, switched it all around, and for some reason it just won't do it for the third question, regardless of if I switched it out. So, here is the code in question. I'm just going to show the first snippets of it because it is just about copied and pasted over and over again. Code:
$(document).ready(function() {
$('#q1').click(function() {
$('#qbox h3').html('<h3>What have you done to stop illegal aliens from getting taxpayer funded healthcare?</h3>');
$('#abox').html('<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/f9GH-yvPHSY&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/f9GH-yvPHSY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>');
});
and Code: <tr>
<td><h2>Q1:</h2></td>
<td><a href="#" id="q1"><p>What have you done to stop illegal aliens from getting taxpayer funded healthcare?</p></a></td>
</tr>
Anyways, thank you so very much for taking a look at this. Any suggestions would be greatly appreciated! I hired psd2html.com to code my portfolio website because I had no idea where to start. They designed a specific gallery for me and I don't like it anymore, and it's the last thing holding my back from making my portfolio live. Here is what it looks like right now: http://www.mustlovepink.com/index2.html I attached an image that describes what I would like the gallery to look like. I don't think it's all that different, but the code is honestly such a mess that I need someone to help me with it. I don't even know where to begin If you need more information in order to tell me, feel free to let me know. I really want to get this thing figured out. Hi guys, Great site by the way =). Basically if you view http://debtclock.co.uk/contact and click the form submit before inputting any details in the boxes you will see that the boxes highlight red to indicate there are some fields missing. Everything works fine, but if you view it on I.E 8 you can see that the red fill doesnt appear, only the text above it saying there are errors. Anyway I hope someone can get back to me with an idea, I am sat here in the office pulling my hair out not having an idea what it could be ><><>< I am in the process of developing a form for the company intranet and i've recently added in code to capture the enter key event to prevent the page from automatically submitting. Along with this, i added code to move the focus to the next element in the tab index. When used in IE, the code works perfectly, but when i use it in firefox or chrome the focus jumps to the same box every time. I don't know what i'm doing wrong am i'm hoping someone can help me figure this out. You can test the page at http://implicitarts.com/fandfwork/Lo...l/default.aspx To start, go to the box for duty amount or freight charges and press enter The following code is what I used to handle this event. Code: function handleKeyPress2(e,control)
{
var evt = e ? e : window.event;
var bt = control.id;
if (bt)
{
if (evt.keyCode == 13)
{
//bt.click();
jumptoNext(control, e);
stopEvent(e);
return false;
}
}
}
function jumptoNext(field, event)
{
for (i = 0; i < field.form.elements.length; i++)
if (field.form.elements[i].tabIndex == field.tabIndex + 1)
{
field.form.elements[i].focus();
if (field.form.elements[i].type == "text") field.form.elements[i].select();
break;
}
}
function stopEvent(e)
{
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript'>
function myForm(){
// Make quick references to our fields
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var address = document.getElementById('address');
var city = document.getElementById('city');
var state = document.getElementById('state');
var zcode = document.getElementById('zcode');
var email = document.getElementById('email');
// Check each input in the order that it appears in the form!
if(isAlphabet(fname, "Please enter only letters for your first name")){
if(isAlphabet(lname, "Please enter only letters for your last name")){
if(isAlphanumeric(address, "Numbers and Letters Only for Address")){
if(isAlphabet(city, "Please enter only letters for your city name")){
if(madeSelection(state, "Please Choose a State")){
if(isNumeric(zcode, "Please enter a valid zip code")){
if(emailValidator(email, "Please enter a valid email address")){
return true;
}
}
}
}
}
}
}
return false;
}
function formChoice(elem, helperMsg){
if(elem.fname, elem.lname, elem.address, elem.city, elem.state, elem.zcode == 0 || elem.email == 0){
return true;
}else{
alert(helperMsg);
elem.focus();
return flase;
}
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z\s]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>
<body>
<p>My Form.</p>
<form action="conformation.html" target="_self" onsubmit="return myForm()">
<fieldset>
<legend>Name</legend>
First Name:
<input type="text" id="fname" value="" />
<br />
Last Name:
<input type="text" id="lname" value="" />
<br />
</fieldset>
<br />
<fieldset>
<legend>Address</legend>
Address:
<input type="text" id="address" value="" />
<br />
City:
<input type="text" id="city" value="" />
<br />
State:
<select id="state">
<option>Please Choose</option>
<option>AL</option>
<option>AK</option>
<option>AZ</option>
<option>AR</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>HI</option>
<option>ID</option>
<option>IL</option>
<option>IN</option>
<option>IA</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>ME</option>
<option>MD</option>
<option>MA</option>
<option>MI</option>
<option>MN</option>
<option>MS</option>
<option>MO</option>
<option>MT</option>
<option>NE</option>
<option>NV</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NY</option>
<option>NC</option>
<option>ND</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VT</option>
<option>VA</option>
<option>WA</option>
<option>WV</option>
<option>WI</option>
<option>WY</option>
</select>
<br />
Zip Code:
<input type="text" id="zcode" value="" />
<br />
</fieldset>
<br />
<br />
<fieldset>
<legend>E-mail Address</legend>
E-mail Address:
<input type="text" id="email" value="" />
<br />
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Hello Everyone - I am trying to make a form that requires a user to either enter in their mailing address and or e-mail or both. For example, if somebody only enters in their e-mail address the form would validate correctly and send the validation information to a conformation page. Or, the other s scenario would be they entered their mailing address information but left the e-mail field blank, the form would validate and confirm the form information on a conformation page. Or the last scenario would be that all fields were filled out, which then wouldn't be an issue(my form does this now). What I have done was made a custom function, which is in the code above on line, 39 and then have it called on an onsubmit button but that wasn't working. Code he Code: function formChoice(elem, helperMsg){
if(elem.fname, elem.lname, elem.address, elem.city, elem.state, elem.zcode == 0 || elem.email == 0){
return true;
}else{
alert(helperMsg);
elem.focus();
return flase;
}
}
The other thing I tried to do was making the if on line 25 an else if else and or just an else. I understand with an else if the condition are not met than the if statement moves on to the else and if that isn't met then both statements are false and the form will not submit, but both else if else, and else doesn't work at line 25. I tried moving the line 25 e-mail line down past the brackets and that didn't work. I have read many books and have visited many sites to try on my own to learn how to do this, and I think I am not understanding some basic concepts, and I would be tickled if somebody could look at my code and look at my problem and see what knowledge I am missing and how to fix my problem. Thanks. Hi, I'm fairly new to javascript, I created a javascript image gallery using a tutorial found on web monkey. Please see below: Code: <script language="JavaScript" type="text/javascript">
<!--
var interval = 1500;
var random_display = 0;
var image_dir = "images/exhibition/"
var ImageNum = 0;
imageArray = new Array();
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-sealskinz.png");
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-orchard.png");
var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}
function getPrevImage() {
ImageNum = (ImageNum-1) % number_of_image;
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
// -->
</script>
However unfortunately there are two issues, one is IE6 is coming up with javascript errors and IE7 gets an error when you click the previous button on the first image. The buttons look like this: Code: <div id="left-arrow-container"><a href="#" onClick="prevImage('rImage'); clearTimeout(timerID)"><img src="images/left-arrow.png" alt="left arrow" name="leftarrow" width="58" height="37" border="0" id="leftarrow" /></a></div>
<div id="see-the-whole-project"> see the whole project</div>
<div id="right-arrow-container"><a href="#" onClick="rotateImage('rImage'); clearTimeout(timerID)"><img src="images/right-arrow.png" alt="right arrow" name="rightarrow" width="58" height="36" border="0" id="rightarrow" /></a></div>
Being new to javascript I don't know how to get round these issues so if anyone could advise me I would really appreciate it. Thanks Gary i am trying to achieve a JS driven button for a cms. for example i have a text in a textarea so i select the text and add the bold attribute to this text. my text before : text my text with bold added : <b>text</b> what the function to achieve this ? thanks hello everyone I am working on a quiz which marks the user and displays to different screens when the total has been calculated. If the user gets over 80% a congratulations page is shown but if you score less your told to go back and look at some of the material again. I would like the congratulations page to show a button to let the users continue on to the next section of the tutorial. Does any one have any ideas how I could do this? im stumped. I have inserted the code below, any help would be much appreciated as I'm a little stuck :/ Code: // Function to create arrays.
function makeArray(len) {
for (var i = 0; i < len; i++) this[i] = null;
this.length = len;
}
// creates objects for this question.
function makeQuestion(question, correctAnswer) {
var args = makeQuestion.arguments;
this.question = question;
this.correctAnswer = correctAnswer;
this.userAnswer = null;
this.isCorrect = isCorrect;
this.showForm = showForm;
this.userChoices = new makeArray(args.length - 2);
for (var i = 0; i < args.length - 2; i++) {
this.userChoices[i] = args[i + 2];
}
}
// determins if the questions answered correctly
function isCorrect() {
if (this.correctAnswer == this.userAnswer) return true;
else return false;
}
// Method to display contents of question object.
function showForm(n) { //argument n is the number of the question.
document.write((n + 1) + '. ' + this.question + '<BLOCKQUOTE><FORM>'); //n+1 = the number of the question in the array (has to add one because the array starts with 0 or the first question would be number 0, this question displays the questions text, blockquote off sets the answer making them indented.
for (var i = 0; i < this.userChoices.length; i++) { //goes through the questions one by one.
document.write('<INPUT TYPE = "RADIO" NAME = "q' + n + //create the radio buttons.
'" onClick = "quiz[' + n + '].userAnswer = ' + i + '">');
document.write(this.userChoices[i] + '<BR>');
}
document.write('</FORM></BLOCKQUOTE>');
}
// This corrects the quiz, dispays the correct answers and the score.
function correctQuiz() {
var correct = 0; // sets the correct page to a score of zero
correctPage = '<HTML><TITLE>Corrections</TITLE><BODY BGCOLOR = "#FFFFFF">'; // sets the attributes of the correction page
for (var i = 0; i < quiz.length; i++) { //loop runs through questions
if (quiz[i].isCorrect()) correct++; // the is correct starts at 0 every time is correct returns true (an answer is correct) it adds 1 to the number adding up correct answers.
}
var score = Math.round((correct / quiz.length) * 100); // find out the % of correct answers by using math and the % equation
correctPage += 'Sco <STRONG>' + score + '</STRONG> %';
if (correct < (quiz.length / 100) * 80) { //if the correct number is less than the quiz length then not all the answers were correct if it is the same then all ansers were correct.
correctPage += ifWrong; // if there were wrong answers
for (var i = 0; i < quiz.length; i++) { // starts a for loop through the answers
if (!quiz[i].isCorrect()) { // if quiz doesn't = to iscorrect.
correctPage += (i + 1) + '. ' + // this shows what number was wrong.
quiz[i].userChoices[quiz[i].correctAnswer] + '<BR>'; // displays the correct answes for the questions that were wrong
}
}
}
else correctPage += ifAced; // this is the correct page displayed if all the answers were right.
correctPage += '</BODY></HTML>'; // opens the window of correct page
correctwin = window.open ('', '', 'height=300,width=300,scrollbars=yes');
if (correctwin.opener == null) correctwin.opener = window;
correctwin.location = 'javascript:opener.correctPage';
}
// Message to display if quiz is aced.
var ifAced = "<P>Well done! you have passed the test. You can now move on to the next section of the tutorial<P>";
// Message to display if any are wrong.
var ifWrong = "<P>Check below to see the answers that you got wrong. It maybe helpful if you go back and read the bits your unsure of.<P>";
// Create seven question objects...
quiz = new makeArray(8); // this is how many questions there is in the quiz
quiz[0] = new makeQuestion("What is the correct name for the leg marking found in picture 1?", // 1st question starts at 0 because thats the first number in an array
2, // correct answer
"Sock", // choice 0
"Stocking", // choice 1
"Coronet band", // choice 2
"half cannon"); // choice 3
quiz[1] = new makeQuestion("What is the correct name for the leg marking found in picture 2?", // 2nd question
0, // correct answer
"Sock", // choice 0
"Stocking", // choice 1
"Coronet band", //choice 2
"half cannon"); //choice 3
quiz[2] = new makeQuestion("What is the correct name for the leg marking found in picture 3?",
1, // correct answer
"Sock", // choice 0
"Stocking", // choice 1
"Coronet band", //choice 2
"half cannon");
quiz[3] = new makeQuestion("What is the correct name for the leg marking found in picture 4?",
3, // correct answer
"Sock", // choice 0
"Stocking", // choice 1
"Coronet band", //choice 2
"half cannon");
quiz[4] = new makeQuestion("What is the correct name for the face marking found in picture 5?",
2,
"Bald",
"Star",
"Snip",
"Blaze");
quiz[5] = new makeQuestion("what is the correct name for the face marking found in picture 6?",
0,
"Bald",
"Star",
"Snip",
"Blaze");
quiz[6] = new makeQuestion("what is the correct name for the face marking found in picture 7?",
3,
"Bald",
"Star",
"Snip",
"Blaze");
quiz[7] = new makeQuestion("what is the correct name for the face marking found in picture 8?",
1,
"Bald",
"Star",
"Snip",
"Blaze");
Trying to build a timer for an image array, it works, I've created also a stopTimer on hover event. But, what I wish to do Is create buttons so the users can press previous or next and see the sliding images as they wish. here'S my code so far : <script type="text/javascript"> var currPic=1; var totPics=8; var keepTime; function setupPicChange() { keepTime=setTimeout("changePic()", 15000); } function changePic() { currPic++; if(currPic>totPics) currPic=1; document.getElementById("picture").src="/images/services/picture"+currPic+".png"; setupPicChange(); } function stopTimer() { clearTimeout(keepTime); } function startTimer() { keepTime=setTimeout("changePic()", 5000); } function prevTimer() { currPic-1 } function nextTimer() {currPic+1} </script> I've created the nextTimer and prevTimer functions but they do not seem to work. I do not know how to integrated these functions in CSS sor my button, which are designed with CSS hover, down and active states... can you guys help me out ? am pretty basic here with codes... Hi all. Can someone tell me why I can select both HTML AND another radio button, but when I unselect, and select a # of 1 through 4, I can switch between the radio buttons, but I can't if I select HTML first? Also, what's wrong w/ this code? Code: <html>
<head>
<title>Webpage Teacher - V 1.0</title>
</head>
<body>
<script>
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
</script>
<form name="radioExampleForm" method="get" action="">
<p>
<label for="code1"><input type="radio" value="HTML" name="code" id="code1"> HTML</label>
<label for="number0"><input type="radio" value="0" name="number" id="number0"> Zero</label>
<label for="number1"><input type="radio" value="1" name="number" id="number1"> One</label>
<label for="number2"><input type="radio" value="2" name="number" id="number2"> Two</label>
<label for="number3"><input type="radio" value="3" name="number" id="number3"> Three</label>
<label for="number4"><input type="radio" value="4" name="number" id="number4"> Four</label>
</p>
<p>
<script>
var thevar='';
if(document.forms['radioExampleForm'].elements['number']){
thevar='number';
}else{
thevar='code';
}
document.write(''
+'<input type="button" onclick="alert(\'Checked value is: '+getCheckedValue(document.forms[\'radioExampleForm\'].elements[\''+thevar+'\']));" value="Show Checked Value">');
</script>
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['code'], 'HTML');" value="Set Checked to HTML">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '1');" value="Set Checked to One">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '2');" value="Set Checked to Two">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '3');" value="Set Checked to Three">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '4');" value="Set Checked to Four">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], ''),setCheckedValue(document.forms['radioExampleForm'].elements['code'],'');" value="Uncheck All">
</p>
</form>
</body>
</html>
I simply want it to display the Check Value button and detect 2 different id's for 2 different radio buttons (which is 'code' and 'number') Thanks! I'm trying to make radiobuttons with a javascript function that gets called when a button is selected to make an image appear depending on what they click. However, after looking it up for a while I have nothing since some tell me to do document.formName.name.value; some tell me to use an id with my buttons and just use a document.getElementByID(""); etc. This is for a project and we havent used parameters yet and I dont know how to implement them in the HTML as well This is my code: function classchoice() { if(document.getElementById('mage') == true) { classtype = "<img class='display' src='mage.jpg'>"; document.getElementById("picture").innerHTML=classtype; } if(document.classes.classes.paladin == true) { classtype = "<img class='display' src='paladin.jpg'>"; document.getElementById("picture").innerHTML=classtype; } if(document.classes.classes.hunter == true) { classtype = "<img class='display' src='hunter.jpg'>"; document.getElementById("picture").innerHTML=classtype; } if(document.classes.classes.rogue == true) { classtype = "<img class='display' src='rogue.jpg'>"; document.getElementById("picture").innerHTML=classtype; } } This is the HTML: <form name="classes"> <input type="radio" name = "classes" id="mage" onmousedown="classChoice();"> <img src = "mage.jpg" /> <input type="radio" name = "classes" id = "Paladin" onmousedown="classChoice();"> <img src = "Paladin.png" /> <input type="radio" name = "classes" id = "hunter" onmousedown="classChoice();"> <img src = "hunter.PNG" /> <input type="radio" name = "classes" id = "rogue" onmousedown="classChoice();"> <img src = "rogue.jpg" /> </form> I hope it's readable because I copy and pasted my code and the indentations are a bit messed up when creating a button with javascript, is it possible to change the blue color when you mouse over it? I know its a stupid question but I am curious... I'm new to this javascript stuff..
|
|||||||