JavaScript - Javascript Handled Buttons And Images Dont Appear In Ie8

Hey,
I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it,

Here is my form with the two textboxes and submit button:
<form>
x: <input type="text" name="x" /><br />
y: <input type="text" name:"y" /><br />
<input type="submit" value="Submit"/><br />
</form>

And i need it so that they change the values of these:

//this shows where my sprite will start on the canvas
var block_x;
var block_y;
searched the internet for hours and cant really find anything i understand or works.
any help is much appreciated

how can i make a button that takes the user to the top of the page without the url#top being displayed in addy bar? i just dont like the way it looks

thanks peeps

To be clear my approach to coding is basically that of building some kind of Java Frakenstein's Monster... which also explains why everything I create invariably ends up in a windmill on fire...


This is what I have managed to put together so far:

Code:

<script type="text/javascript">
var homeDown = new Array()
homeDown[0] = "images/home001.png";
homeDown[1] = "images/home002.png";
homeDown[2] = "images/home003.png";
homeDown[3] = "images/home004.png";
homeDown[4] = "images/home005.png";
homeDown[5] = "images/home006.png";
homeDown[6] = "images/home007.png";
homeDown[7] = "images/home008.png";
homeDown[8] = "images/home009.png";
homeDown[9] = "images/home010.png";
homeDown[10] = "images/home011.png";
homeDown[11] = "images/home012.png";
homeDown[12] = "images/home013.png";
homeDown[13] = "images/home014.png";
homeDown[14] = "images/home015.png";

var homeOver = new Array()
homeOver[0] = "images/image001.png";
homeOver[1] = "images/image002.png";
homeOver[2] = "images/image003.png";
homeOver[3] = "images/image004.png";

var x=0;

function NormalImage()
{
document.getElementById("button1").src="images/home.png";
}


function MouseOver()
{
document.getElementById("button1").src=homeOver[x];
x++;
setTimeout("MouseOver()", 8);
}


function MouseDown()
{
document.getElementById("button1").src=homeDown[x];
x++;
setTimeout("MouseDown()", 8);
}
</script>

...and the HTML:

Code:

<a href="http://www.google.com">
	<img id="button1" src="images/home.png" onmousedown="MouseDown(button1)" onmouseover="MouseOver(button1)"
onmouseout="NormalImage(button1)"/>
</a>

I'm sure that's probably the wrong way of doing it but it vaguely works. What I ultimately want is a button that will play the long image sequence on click and the shorter sequence on mouse over.

However at the moment it appears that the states of the mouse being over and clicked are clashing so I need something to ignore mouseover images on click and another bit to reset the count on mouseover so it can play again.

If I remove the mouseover event the animation on mousedown plays well, though I suspect it might be necessary to preload the images when it's online.


Alternatively if anyone feels like writing a much easier bit of script that will do the same thing and slap me for being stupid that is acceptable too...

I have the following buttons ...

Code:

<input id="newTaskButton" type="button" name="Good Morning" value="201"  />
<input id="newTaskButton" type="button" name="Hello World" value="201"  />

... and the following javascript ...

Code:

    <script type="text/javascript">
        $(document).ready(function() {
            $("#newTaskButton").click(function() {
            	alert(" " + document.getElementById("newTaskButton").name);
            });
        });
    </script>

... but I am having some trouble having the second button to response.

My objective is to have 2 or more button that have the same click function (in this case, newTaskButton) but when clicked, it will produce different response. (in this case, the first button will response 'Good Morning' while the second button will response 'Hello World')

Appreciate any help. Alternatives are welcome too.

Hello. I am a new user.
I have got a website, www.eastbourneinks.co.uk where the quantity buttons (+) & (-) do not work on most computers where I have had feedback. Is there any way of making them work on any/all computers. This is one of the pages:
http://eastbourneinks.co.uk/product/...nk-cartridges/
Many thanks.
Phil.

Hi, I'm a year 11 student studying GCSE computing. I'm doing a project and I need to conduct some primary resarch, so I would be grateful if someone could explain to me how to go about coding radio buttons in a HTML web page which uses JavaScript.
Thank you!

I'm currently working at school on a website and I cycled through aloooot of tutorials, but I couldn't find anything >.<
so the qeustion is how to make a VERY simple javascript div tag replacer using buttons.
so if I click for example button 1 then I want div tag 1 replaced with div tag 2 and when you press button 2 div tag 1 or 2 gets replaced with div tag 3.
the closest tutorial I found was: Replace one div with another

I can't get the radio buttons to work properly in my browser. If you don't press one the alert box does not tell you that you have to tick either male or female. Also I noticed you can tick both but it won't say you must choose only one, how can I sort this...any help please.

case "radio_hidden":
if (fld.value != "1")/* radio male or female button should be checked*/
{
fld.valid = true;
}
break;

if (frm.radio_hidden.valid == false)
{
report_text += " You must click a radio button male or female.\n\n"
}

<br><u>Select Your gender:</u><br>

<input type="radio" name="male" value="" onchange="radio_hidden.value = 1;"> Male
<br>
<input type="radio" name="female" value="" onchange="radio_hidden.value = 1;"> Female
<br>
<input name="radio_hidden" value="" type="hidden">

Can anyone tell me how I can use JavaScript to check to see if a radio button is checked. I tried the code below, but that doesn't work.

<script type="text/javascript">
function hideAll() {
document.getElementById("existing").style.display="none";
document.getElementById("delivery").style.display="none";
}
</script>
<script type="text/javascript">
function doIt() {
var q = document.getElementsByName('q');
for(var i = 0; i < q.length; i++){
if(q[0].checked == true){
document.getElementById("existing").style.display="none";
document.getElementById("delivery").style.display="none";
window.location="cust-query2.php?cust_id=0";
}
else if(q[1].checked == true){
document.getElementById("existing").style.display="";
document.getElementById("delivery").style.display="none";
}
else if(q[2].checked == true){
document.getElementById("delivery").style.display="";
document.getElementById("existing").style.display="none";
}
}
}
</script>
</head>

<body onLoad="hideAll()">
<div align="center">
<table width="70%" border="0">
<tr valign="top">
<th scope="row"><h2 align="left">Please Select an Option:</h2>
<form name="myform" onSubmit="doIt()" action="">
<p align="left" class="indent">
<input type="radio" name="q" value="0">
<label>New Customer</label>
<br />
<input type="radio" name="q" value="1">
<label>Existing Customer</label>
<br />
<!--<input type="radio" id="q" value="s">
<label>Customer Search</label>
<br />-->
<input type="radio" name="q" value="2">
<label>Print Delivery Information</label>
<br /><br />
<input type="submit" value="Submit" />
</form>
</p>
<div id="existing" align="left" class="indent">
<form action="cust-query2.php" method="post">
Enter Phone Number:
<input type="text" name="cust_id" />
<input name="submit" type="submit" />
</p>
</form>
</div>
<div id="delivery" align="left" class="indent">
<form method="post" action="search_delivery_by_date1.php">
Enter Date: <input type="text" name="date" />
Enter Time:
<select name="ampm">
<option>AM</option>
<option>PM</option>
</select>
Enter City:
<select name="city">
<option>Boro Park</option>
<option>Flatbush</option>
<option>Williamsburg</option>
</select>
<input type="submit" value="Print Delivery Information">
</form>
</div>
</td>
</tr>

hi,
i tried to run the following code with IE but it gives error as
" document.try.radiogrp is null or not a object."

<code>
<html>
<head>
<script language="javascript">
function fresh()
{ document.write("question 1's options are")
document.write("option 1:"+document.try.radiogrp[0].value+"<br/>")
document.write("option 2:"+document.try.radiogrp[1].value+"<br/>")
document.write("option 3:"+document.try.radiogrp[2].value+"<br/>")
}
</script>

</head>
<body>
<form name="try" >
<input type="radio" name="radiogrp" id="r1" value="yes">yes
<input type="radio" name="radiogrp" id="r2" value="no">no
<input type="radio" name="radiogrp" id="r3" value="may be">may be
<input type="button" value="begin" onClick="fresh();">
</form>
</body>
</html>
</code>
please help me find the error and run it correctly with IE.
thanx...

Hello,

I am trying to get my jqtransform'd radio buttons to switch to "checked" via my rowover javascript that I was already using.

Here is the script for the row over effect:

Code:

function selectRowEffect(object, buttonSelect) {
  if (!selected) { 
    if (document.getElementById) {
      selected = document.getElementById('defaultSelected');
    } else {
      selected = document.all['defaultSelected'];
    }
  }

  if (selected) selected.className = 'moduleRow';
  object.className = 'moduleRowSelected';
  selected = object;
  


// one button is not an array
  if (document.checkout_address.shipping[0]) {
    document.checkout_address.shipping[buttonSelect].checked=true;
  } else {
    document.checkout_address.shipping.checked=true;
  }
}

function rowOverEffect(object) {
  if (object.className == 'moduleRow') object.className = 'moduleRowOver';
}

function rowOutEffect(object) {
  if (object.className == 'moduleRowOver') object.className = 'moduleRow';
}
//--></script>

Currently if I click on the row, it will actually select the radio button in my form but the jqtransform does not reflect that so it still looks like it is not clicked. I tried addings something like

jqTransformRadio.addClass("jqTransformChecked");

but that is no good. any help is greatly appreciated.

I am trying to add tabindex values to buttons built in JavaScript as I did with accesskeys but having no luck--it disrupts my page layout. Anyone have suggestions? Here is the code I am working with:
Code:

function ObjButtonBuild() {
  this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
  this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
  this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
  if(this.accessKeyValue && this.accessKeyValue!=null){
  
  	this.divInt+=' accessKey='+this.accessKeyValue+' ';
  }
  
  if( this.altName ) this.divInt += ' title="'+this.altName+'"'
  else if( this.altName != null ) this.divInt += ' title=""'
  this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
  if( this.altName ) this.divInt += '" alt="'+this.altName
  else if( this.altName != null ) this.divInt += '" alt="'
  this.divInt += '" width='+this.w+' height='+this.h+' border=0'
  if( !is.ns4 )  this.divInt += ' style="cursor:pointer"'
  this.divInt += '></a>'
}

Code:

button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()

I am building an online store where the customer can select custom parts. I'm quite new to javascript, but I've managed to create a radio button list, where the price is added from each section.

I would like a box to show all of the options selected, not just the sum total.

I've included the text with value and used parseInt. I have been told I can use value.split(" "), but I don't really know how to go about doing that. I've been fiddling for hours now and don't seem to be able to get anywhere.

I would also like to include a 3rd value, another number, and add that one in a separate calculation.

E.g. For "50 5850ati1gb 56" I would like one calculation which adds 50 to the total, another calculation adding 56 to a different total and 5850ati1gb added to a list of all of the components.

I am not very experienced with this, so don't be afraid to talk to me like I'm stupid! Thank you in advance.

My code so far:
Code:

<head>
    <script type="text/javascript">
        function DisplayPrice(price){
                        var val1 = 0;
                        for( i = 0; i < document.form1.part.length; i++ ){
                                if( document.form1.part[i].checked == true ){
                                        val1 = document.form1.part[i].value;
                                }
                        }

                        var val2 = 0;
                        for( i = 0; i < document.form2.part2.length; i++ ){
                                if( document.form2.part2[i].checked == true ){
                                        val2 = document.form2.part2[i].value;
                                }
                        }

        var val3 = 0;
                        for( i = 0; i < document.form3.part3.length; i++ ){
                                if( document.form3.part3[i].checked == true ){
                                        val3 = document.form3.part3[i].value;
                                }
                        }


                        var sum=parseInt(val1) + parseInt(val2) + parseInt(val3);
            document.getElementById('totalSum').value=sum;
        }
    </script>
</head>
<body>
    <form name="form1" id="form1" runat="server">
       <br>
       <input id="rdo_1" type="radio" value="0 1.8ghz2xAMD" name="part" checked="checked" onclick="DisplayPrice(this.value);">1.8Ghz Dual Core AMD
        <br>
        <input id="rdo_2" type="radio" value="50 2ghz2xAMD" name="part" onclick="DisplayPrice(this.value);">2Ghz Dual Core AMD
        <br>
    </form>Choose your memory:<br />
    <form name="form2" id="form2" runat="server">
        <br>
        <input id="rdo_1" type="radio" value="0 1333corsair1gb" name="part2" checked="checked" onclick="DisplayPrice(this.value);">1333 Corsair 1GB
        <br>
        <input id="rdo_2" type="radio" value="50 1333corsair2x1gb" name="part2" onclick="DisplayPrice(this.value);">1333 Corsair 2x1GB
        <br>
    </form>Choose your graphics card:<br />
    <form name="form3" id="form3" runat="server">
        <br />
        <input id="rdo_1" type="radio" value="0 5830ATI1gb" name="part3" checked="checked" onclick="DisplayPrice(this.value);">1GB ATI 5830
        <br />
        <input id="rdo_2" type="radio" value="50 5850ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5850
        <br />
        <input id="rdo_3" type="radio" value="75 5870ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5870
        <br />
    </form>
</body>

i have written a short script that outputs to:

Your hobby is: undefined.

Could someone please have a look at the script. I think, i wrote a standard script that deals with radio buttons. Thank you very much

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Form 2 -Javascript</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script src="js/test.js" type="text/javascript"></script>
</head>
<body>
<form id="info" action="" method="post">
Reading<input type="radio" name="hobby" value="male"/>
Gardening:<input type="radio" name="hobby" value="female"/>
<input type="submit" name="submit" value="Submit"/>
</form>
</body>
</html>




EXTERNAL STYLE SHEET:

function output() {
document.getElementById("info").onsubmit=function (){
var hobby=document.getElementById("info").hobby.value;
document.write("<strong>Your hobby is:</strong>"+ hobby);
}
}



window.onload=output;