JavaScript - Help With Buttons

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

Hi,

I have buttons like these:
PHP Code:
<button type="button" onclick="izdas()">I&#382;das</button> 
<button type="button" onclick="miestas()">Miestas</button> 
<button type="button" onclick="map()">&#381;emėlapis</button> 
<button type="button" onclick="infantry()">Kariuomen&#279;</button> 
<button type="button" onclick="biuld()">Statiniai</button> 


How I can add images on them?? Size would be 100x20px.

Also, I would e thankful if someone would help me position them in one vertical line.

Thanks in advance...

Im trying to configuere a form that
a. a radio buttons that allow the user to choose between quarters, nickels, dimes and pennies.
and show image when click on my radio button
im confused on how to get the image to display whenthey click on the radio button

i have a simple frame that looks like this
http://i307.photobucket.com/albums/n...aker/help2.jpg

i have 3 pages (side.html, page1.html and page2.html) the above picture has side.html and page1.html loaded on default, what i want to do is whenever i click on the page 1 button, page1.html will load on the right side and when i click on page 2 button, page2.html will load

i cant figure out what the code for this is and googling for the solution isn't getting me anywhere

help please

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

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.

I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page.

Here's a working example of what I have.

The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think.

HTML-side my button images get class="rollover" and a unique id.

Code:

window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
	var rollOvers = document.getElementsByClassName("rollover");
	for(var i=0; i<rollOvers.length; i++){
		setupRollover(rollOvers[i]);
		}
}
function setupRollover(thisImage){
	//UP
	thisImage.outImage = new Image();
	thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
	thisImage.onerror = thisImage;
	thisImage.onmouseout = rollOut;
	//OVER
	thisImage.clickImage = new Image();
	thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
	thisImage.onerror = rollOut;
	thisImage.onmousedown = rollClick;
	//DOWN
	thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
	thisImage.onerror = rollOut;
	thisImage.onmouseover = rollOver;
	thisImage.onmouseup = rollOver;
}
function rollOver() {
	this.src = this.overImage.src;
}
function rollOut() {
	this.src = this.outImage.src;
}
function rollClick() {
	if(lastClick){
	lastClick.onmouseout = rollOut;
	lastClick.src = this.outImage.src;
	}	
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;

What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible?

Thanks for any help you can provide!

hello,

Im trying to write a program when the user clicks on the button,
the textbox should display "how are you ".
This is what I tried :



<html>
<head>
<title>"Click"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p>
<input name="text1" type="text" id="text1" value="textbox 1" onFocus="this.style.background ='yellow'" onBlur="this.style.background='white'">
</p>
<p>
<input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'">
</p>


<p>

<button onclick="textbox1.value="how are you">Click Me!</button>

</p>



</body>

</html>

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'm creating a unit converter program using radio buttons and i can't seem to get one aspect working. i can't seem to get another set of radio buttons to display. the way the program is supposed to work is there will be 3 radio buttons saying to convert length, weight, and volume. if the user selects to convert weight, another set of radio buttons will appear with 2 options, to convert from pounds to kilograms, or kilograms to pounds. then the user enters the number in a text box and clicks to convert button. my problem is getting the second set of radio buttons to display. I have no clue how to get this to work. to get a better understanding of whats going on, here is the program without the radio buttons that i created. i'm trying to use radio buttons in place of the prompting message.

Code:

<!DOCTYPE html>
<html>
    <head>
        <title> Conversions of Weight and Length</title>
        
        <script type="text/javascript">
        
        function clearMe() 
        { 
            var _s=top; 
            var _d=_s.document; 
            _d.open(); 
            _d.write(""); 
            _d.close(); 
        } 
        function main()
        {
                      
            
            var repeat = confirm("Do you want to perform another conversion ? \r" + "<p><b>Note:</b> Pressing OK allows for another conversion, and pressing CANCEL exits</p>");
            
            if(repeat==true)
                {
                    convert();
                }
            else 
                {
                    alert("Your program has been terminated!");
                    self.close();            
                }
        }
            
        
       
        function convert()
        {
            var unit, direction, value, result, original_units, new_units;
            document.write("<br/><br/>")
            document.write("Weight and Length conversion menu" + "<br/><br/>");
            document.write("1. convert length" + "<br />");
            document.write("2. convert weight" + "<br />");
            document.write("3. convert volume" + "<br />");
              
                   unit = window.prompt("select conversion type: ");
              
              if ((unit<0) || (unit>3))
              {
                  alert("Select Menu option 1, 2, or 3!");
                  unit = window.prompt("Select conversion type: ");
              }
              switch (unit)
              {
                  case '1':
                     direction = choose_direction("<br /><br />1. Feet to meters<br />" , "2. Meters to feet <br />");
                      if (direction =='1')
                          {
                              original_units = "meters"; new_units = "meters";
                             
                          }
                          else {
                              new_units = "feet"; original_units = "meters";
                          }
                          break;
                  case '2':
                      direction = choose_direction("<br /><br />1. Pounds to kilograms <br />", "2. Kilograms to pounds <br /> <br />"); 
                      if (direction =='1')
                          {
                             original_units = "pounds"; new_units = "kilograms";
                             
                          }
                          else {
                              new_units = "pounds"; original_units = "kilograms";
                          }
                          break;
                  case '3':
                      direction = choose_direction("<br /><br />1. Gallons to liters<br />", "2. Liters to gallons <br /><br />");
                      if (direction =='1')
                          {
                             original_units = "gallons"; new_units = "liters";
                             
                          }
                          else {
                              new_units = "gallons"; original_units = "liters";
                          }
                          break;
                          
                          
              
              }
               value = window.prompt("Enter value to be converted:")
              
              
              switch(unit)
              {
                  case '1':
                      result = feet_meters(value, direction);
                      break;
                  case '2':
                      result = pounds_kilograms(value, direction);
                      break;
                  case '3':
                      result = gallons_liters(value, direction);
                      break;
              }
              document.write(value + original_units + " = " + result + new_units);
                          
        }
        function choose_direction(option1, option2)
        {
             var direction;
            document.write(option1);
            document.write(option2);
            do
            {
                window.prompt("Select a conversion direction");
                return direction;
            }
            while ((direction!='1') || (direction !='2'));
                              
        }
        function pounds_kilograms(value, direction)
        {
            if (direction == '1')
               return parseFloat(value)/parseFloat(2.2046);
            
            else
                return parseFloat(value)*parseFloat(2.2046);
        }
        function gallons_liters(value, direction)
        {
            if (direction == '1')
                return parseFloat(value)*parseFloat(3.7854);
            else
                return parseFloat(value)/parseFloat(3.7854);
        }
        function feet_meters(value, direction)
        {
            if (direction == '1')
                return parseFloat(value)/parseFloat(3.2808);
            else
                return parseFloat(value)*parseFloat(3.2808);
        }
        
        </script>
    </head>
    <body>
        <h1> weight and length conversion </h1>
        <script type="text/javascript">
          convert();            
           main();
        </script>
        
    </body>
</html>

I have a page where I have a image displayed and 3 buttons underneath the image. The image displayed is the outdoor tool "hoe". I have the buttons named saw, hoe and tree trimmer below the image. What I want to do is when the user of the web page clicks a button, let's say for example tree trimmer the new image will appear on the page in place of the old image. Right now my code is messed up, it does not matter what image you click but only a image of a saw appears. Also I cannot get my image centered correctly. Does anyone have any suggestions to help me?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img.shown {display: block;
margin-left: auto;
margin-right: auto; }




</style>
</head>

<h1 style="text-align:center">A simple slide show</h1>



<script>
function pictureChange()
{
document.getElementById("shown").src="/tools/saw.jpg";
}


</script>


<body>
<img id="shown" src="/tools/hoe.jpg";>
<p><input type="button" id="theButton" value="Saw" onclick="pictureChange()">
</p>
<p><input type="button" id="theButton" value="Hoe" onclick="pictureChange()">
</p>

<p><input type="button" id="theButton" value="Tree Trimmer" onclick="pictureChange()">
</p>





</body>
</html>

*** I have tried this code snipet below and it does not work for me because I don't know the actual url, the images are uploaded to a server.***********

function pictureChange(imgurl)
{
document.getElementById("shown").src='/tools/' + imgurl + '.jpg';
}

Hey guys,

I'm a noob with javascript and I only know simple HTML coding, so I have become stuck. I can program in other languages though, so I understand the principles. That being said, I have become stuck with something.

My aim is to have a series of page where text is displayed, and then two or more buttons. Once a button is clicked, I want the screen to clear and it displays the next lot of text, followed by some more buttons.
Once they are pushed, it continues on.

So basically, each section has its own code that it pushes, plus its own buttons which lead to other sections. I am not trying to make a choose your own adventure book, but the layout is basically one of these.

I can do this in another language by simply having a few sections. Inside each section, it retrieves the option and proceeds. However, when I am trying to do this, I am getting confused.

The way my other programming experience tells me to write it, I would write a function which is called for each section, and it would display the text, the buttons, and return to the main function in the program.

However, because the buttons are in HTML, I cannot put code for the new buttons instead the functions. If I put the code inside the body of HTML, it will automatically be displayed. I cannot write an if statement to determine which buttons are displayed.


Can you please give me some advice around this? I hope I have made myself clear enough to be understood!!

One other thing I should mention, I really want to be able to do this in a single HTML file instead of calling other files. I think this would work fine by using frames and multiple HTML files, but I would prefer not to unless I really need to. One file would be much better for me.

Thanks!


Below is the basic code I am working from. It displays the first section with some text, displays two buttons and it goes to the next section on a button click.



Code:

<html>

<head>
<script type="text/javascript">

function button1()
{
document.write("Button 1 was pushed. Insert text here. Choose from two new buttons below:");
}

function button2()

{
document.write("Button 2 was pushed. Insert text here. Choose from two new buttons below:");
}

</script>
</head>



<body>

<form>
<input type="button" value="Button1" onClick="button1()" />
<input type="button" value="Button2" onClick="button2()" />
</form> 

</body>
</html>

I've been looking around and all the validation stuff I've seen doesn't work for what I have.

Here is what I am trying to do:
The user selects the Heads or Tails radio button for the first flip and then selects heads or tails radio button for the 2nd flip. The script then randomly flips two coins and compares it to what the user selected and if they are the same the user wins and if not then they lose.

So there would be 4 buttons total, two Heads and two Tails. The first set of Heads and Tails needs to be assigned to "guess1" and the 2nd set is "guess2".

So if the user clicks Tails for Flip1 and Heads for Flip2 then Tails is assigned to guess1 and Heads is assigned to guess2.

Right now the script just assumes the user is selecting heads for both flips.

Code:

<html> 
<head>
<title>Guess Two Coin Tosses</title>

<script>

function flip5(){
	
	//Input
	var guess1 = document.getElementById('guess1').value
	var guess2 = document.getElementById('guess2').value
	var flip1 = Math.floor(Math.random() * 2)
	var flip2 = Math.floor(Math.random() * 2)
	var outcomes

	if (flip1 == 0) flip1 = 'Heads';
		else flip1 = 'Tails';
	if (flip2 == 0) flip2 = 'Heads';
		else flip2 = 'Tails';

	//Processing
	if (flip1.toUpperCase() == guess1.toUpperCase()) {
	   if (flip2.toUpperCase() == guess2.toUpperCase()) 
	      outcomes = 'win win';
	   else 
	      outcomes = 'win lose';
	}
	else { // here we lost the first
	   if (flip2.toUpperCase() == guess2.toUpperCase())
	      outcomes = 'lose win';
	   else 
	      outcomes = 'lose lose';
	}

	//Output
	document.getElementById('flip1').value = flip1
	document.getElementById('flip2').value = flip2
	document.getElementById('outcomes').value = outcomes
}
	

</script>

</head>

<body>
<h3>Predict the Futu  Guess Two Coin Flips</h3>
Enter Heads for Heads, Tails for Tails! Case does not matter!
<p/>Your Guess for Flip-1: 
<input type=radio id="guess1" size="5" value="Heads" />Heads
<input type=radio id="guess1" size="5" value="Tails" />Tails
<p/>Your Guess for Flip-2: 
<input type=radio id="guess2" size="5" value="Heads" />Heads
<input type=radio id="guess2" size="5" value="Tails" />Tails
<p/>Flip-1: 
<input type="text" id="flip1"  size="5" value="???" />
<p/>Flip-2: 
<input type="text" id="flip2"  size="5" value="???" />

<p/><input type="button" value="Flip Two!" 
 onclick="flip5()" />
<p/>Outcomes: 
<input type="text" id="outcomes" size="20" value="" />
<hr>
</body>
</html>

Hello there,

Can some one gimme source code for greying out a button on php page.
In my application i have one play button and one stop button in the html form. If i click play button it will update database with play and invoke a script. similarly with stop.
so while they are being played i want this play button to be greyed out.
or

is there any way that i can only show stop button while playing and play button while not playing the files.

HELP PLZZZZZZZZ