|
JavaScript - Having Trouble Making A Simple Script
Hello.. I'm in a Web Development basics class at my College. We are about two weeks in as we've blew through HTML and CSS. Anyway.. to the question.
So for this class I need to make a website with terms and their definitions. The definitions have to be in Javascript and make them show up with an alert. The problem is, I can't figure out how to have unique functions that I can somewhat link with the button. Quote: <html> <head> <script type="text/javascript"> function show_alert() { alert('term definition ONE ') } </script> </head> <body> <input type="button" value="term definition ONE " onclick="show_alert()" /> <input type="button" value="term definition TWO " onclick="show_alert()" /> </body> </html> Making a new button would just link to the script that's in the <head> giving the same definition. It's almost like I need to give each function a variable that matches up with each button, since I have multiple terms.. I hope you get what I'm trying to say. Similar TutorialsOkay, I've already learned from google how to make the following two simple image galleries: This one displays a specific image when its link is clicked And this one displays the previous/next image for whatever's showing. (During its code, it points to this .js file.) My question is, how do I combine those two galleries? How can I make one gallery that contains both kinds of links? Since the two galleries were copied from different places, the names they use aren't the same, and I'm not sure what to change to make it all unified. (I tried fiddling with it for over an hour before giving up.) Let me know if you need any more info from me. Can some please help me. I'm really new at this and is having trouble with this simple example Code: <html>
<head>
<script type="text/javascript">
//Below i was trying to set up a var pam that includes some text
//and the value of form field name pamcheck and then display that result of pam on the screen
//using a check box with a value of 'pale ale malt' hoping that when the ckeck box is checked
//and then user clicks submit the result would be displayed on the screen as
// 'Your selected malt is Pale ale malt'
function pamff1() {
pam = ("<p>Your selected malt is <p>" + pamcheck);
document.write(pam);
}
</script>
</head>
<body>
<form onsubmit="pamff1();">
<input type="checkbox" name="pamcheck" value="Pale ale malt" >
<input type="submit" value="Submit">
</form>
</body>
</html>
Hi, thanks for taking the time to read this. I believe it is a very simple problem however I cannot get it to work, when I run it I enter info into the prompt and it seems to get stuck in a loop. Basically A prompt asks for user to enter a code (has to be either R or r or C or c) though when I enter one of those in it won't work. Code: <html>
<head>
<title>Water Usage</title>
<script type="text/javascript">
// Setting our variables based on user input
var code;
var kl_c;
var kl_r;
var kl_c_cost;
var kl_r_cost;
code = prompt("Please Enter Code");
while ((code != "R") || (code != "C") || (code != "r") || (code != "c") || (code ==""))
{
alert("Please Enter C for Commercial or R for Residential");
window.location.reload(true);
}
if ((code == "C") || (code == "c"))
{
kl_c = prompt("Please Enter The Kilolitres Of Water Consumed");
kl_c_cost = (kl_c * 0.2)
alert("The Total amount of water used for this Residential property is " + kl_c + " Kilolitres and the total cost is $" + kl_c_cost);
}
else if ((code == "R") || (code == "r"))
{
kl_r = prompt("Please Enter The Kilolitres Of Water Consumed");
kl_r_cost = (kl_r * 0.6)
alert("The Total amount of water used for this Residential property is " + kl_r + " Kilolitres and the total cost is $" + kl_r_cost);
}
</script>
</head>
<body>
</body>
</html>
So frustrating that lately I've been having trouble with the simplest of code, and this is about as simple as it gets. Matched it up with every similiar example I can find both in books and on the net, and it seems to be perfectly valid code, but when I run it, nothing. :S 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 language="javascript" type="text/javascript">
function favouriteColour() {
var index = document.getElementById("select1").options[document.getElementById("select1").selectedIndex].value;
document.getElementById = "Your favourite colour is " + index;
}
</script>
</head>
<body>
<select id="select1">
<option></option>
<option id="black" onchange="favouriteColour()">Black</option>
<option id="white" onchange="favouriteColour()">White</option>
<div id="favcolour"></div>
<option>
</select>
</body>
</html>
Thanks in advance. I'm trying to make an xhtml form that validates itself through a javascript function. I have the form up but for some reason I can't get it to validate. I'm not even sure if I linked things correctly. Here's what I have: the xhtml file <?xml version = ″1.0″ encoding = ″utf-8″ ?> <!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> <script src="gas24.js" type="text/javascript"></script> <h2> Registration Form </h2> <title> Javascript Form Validation Homework </title> </head> <body> <table border=""> <form name="validation_form" method="post" onsubmit="return validate()"> <tr> <td> <t>Name: <input type="text" name="YourName" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> E-mail Address: <input type="text" name="YourEmail" size="10" maxlength="24"/> </td> </tr> </br> <tr> <td> Password: <input type="password" name="YourPassword" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> Re-Type Password: <input type="password" name="passwordConfirmed" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> Your Gender: <input type="radio" name="MaleBox" Value="Male"> Male <input type="radio" name="FemaleBox" Value="Female"> Female </td> </tr> </br> <tr> <td> Comments: <input type="text" name="Comments" size="100" maxlength="500" value=""/> </td> </tr> <tr> <td> <input type="submit" value="Submit"/> </td> </tr> </form> </table> <p></p> </body> </html> The javascript file: I've tried two things. This: <SCRIPT LANGUAGE="JavaScript"> function validation() { var x=document.forms["validation_form"]["YourName"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } } And this: function validation() if ( document.validation_form.YourName.value == "" ) { alert( "Please type your name."); valid = false; } if ( document.validation_form.YourPassword.value =! "document.validation_form.Confirm.value" ) { alert ( "Please confirm your password." ); valid = false; } I would greatly appreciate it if somebody could tell me what I'm doing wrong. I'm trying to create a type of virtual pagination that's simple, semantic, and SEO friendly. The concept is like this website: www.doner.com In the bottom right hand corner, if you select a city, different contact information appears. My theory is to assign a class name to the hyperlink, then have a DIV with a matching ID. For example... Code: <a href="#" class="michigan">Michigan</a> <a href="#" class="ohio">Ohio</a> <a href="#" class="illinois">Illinois</a> <div id="michigan"> Michigan container </div> <div id="ohio"> Ohio container </div> <div id="illinois"> Illinois container </div> The JavaScript I have written so far is... Code: var anchor = document.getElementsByTagName('a').className; // grab all hyperlinks and their classes
var div = document.getElementsByTagName('div').getElementByID; // grab all divs and their IDs
if (anchor = div) { // check to see if a hyperlink's class has a matching div ID
div.style.display = "none";
if (anchor.onclick) { // if the hyperlink is clicked...
div.style.display = "visible"; // make matching div ID visible
}
}
Nothing works yet, and I don't know where to continue. The DIVs aren't even hidden upon loading. Can anyone help me? Hey, I recently made my first ever ajax chat, and works given im a noob im quite happy about it :P How ever, sadly - its not smooth like some ajax chat's i've seen out there. And when i submit a message to teh chat the page refreshes. I was wondering if some one could help me by explaining how i can improve the efficientcy of it so it won't refresh and reacts alot quicker to create a live effect - its not totally as good as i hoped. This is what i got for my code: Code: <script type="text/JavaScript">
function sendMessage()
{
$.ajax({
type: "POST",
url: "chatpost.php",
async: false,
data: "message="+$("#myMessage").val(),
});
}
function updateShouts(){
$('#chatArea').load('chat.php');
}
setInterval( "updateShouts()", 2000 );
</scrip>
/////////////////////////FORM//////////////////////////
<div id="chatArea" style="height:500px;"></div>
<form onSubmit="sendMessage()" method="POST">
<input type="texT" id="myMessage" class="blank" style="width:74%;">
<input type="button" class="blank" value="Send Message" onclick="sendMessage();">
</form>
The PHP is chat.php loads the chat (a MYSQL query getting latest 20 chat messages and loops them out into the div) chatpost inserts the message to the table! Hope you can give this newbie some guidance Hi, I'm working on a simple website in which I'm required to use two types of forms input on a webpage. I have decided to make a simple quiz which will be designed as follows; -------------------------------------------------------- Q1: The largest mammal on land is: (radio button choices) Q2: Please tick the two correct answers: (tick boxes, four available... only two correct) ---------------------------------------------------------- (BUTTON: Please click here for the answers) ... answers should appear once the above button is pressed... Answers: Q1: B Q2: A * C Is this possible in a simple way? Sounds quite straight-forward but I'm no expert so forgive me.. Ps: Is it possible to design a radio button which, depending on the choice, the related-text will appear underneath on the same page? So if they select 'A' then paragraph 'A' will show, if they select 'C' then paragraph 'C' will appear (with the rest hiding)... Thanks 4 your time! I am not great at using JavaScript but I am working on it. I really need help with my script. I can't seem to find out why my images won't load correctly. I am trying to get a 2 part radio button selection to show different pictures for every combination of colors you can choose. So if I was to pick black and black a black_black.jpg picture will pop up and black_white.jpg will pop up for a black and white selection. Please if anybody can help I could really use it right now. Thanks! Code: <html>
<body>
<form name = "myform">
<img id = "myImage" src = "MyDefaultImage.jpg">
<br><br>
Barrels: -------- Inserts:<br>
Black <input type = "radio" name = "col1" value = "black" onclick = "showImage();"> Black <input type = "radio" name = "col2" value = "black" onclick = "showImage();"><br>
White <input type = "radio" name = "col1" value = "white" onclick = "showImage();"> White <input type = "radio" name = "col2" value = "white" onclick = "showImage();"><br>
Orange <input type = "radio" name = "col1" value = "orange" onclick = "showImage();"> Orange <input type = "radio" name = "col2" value = "orange" onclick = "showImage();"><br>
Red <input type = "radio" name = "col1" value = "red" onclick = "showImage();"> Red <input type = "radio" name = "col2" value = "red" onclick = "showImage();"><br>
</form>
<br>
<br>
<script type = "text/javascript">
function showImage() {
var A = 0;
var B = 0;
for (var i=0; i <document.myform.col1.length; i++) {
if (document.myform.col1[i].checked) {
A = document.myform.col1[i].value;
}
}
for (var u=0; u <document.myform.col2.length; u++) {
if (document.myform.col2[u].checked) {
B = document.myform.col2[u].value;
}
}
var x = A + "_" + B;
if (x>0) {
var picture = x + ".jpg";
document.getElementById("myImage").src = picture;
}
}
</script>
</body>
</html>
Hi guys i want to make my javascript open the link in the same window instead of opening up i new tab, i know this should be basic but for some reason i can't figure it out, ill post the code below, thanks Code: for (var i=0; i <UN.length; i ++) {
if (( UN[i].toLowerCase() == uname.toLowerCase() ) && (PW[i] == pword)) {
alert ("User name and password matched!");
valid = true;
window.open('http://www.google.com');
When I paste the adsense code on my website home page, between lines 387 and 397, the ad doesn't show. Much more strangely, it makes the ad coming from line 408 disappear - that one was visible before. Any ideas why? my site is roboticmagazine.com Thanks hi. i'm using this script to replace text on a page loaded into another frame, called 'booker'. the script works when i use it on the same page, but i can't seem to get it to reference the other frame for some reason. it executed with 'body OnLoad' any ideas for what i'm doing wrong? thanks. Code: function myscript() {
input = 'Membership';
output='Service Fee';
top.booker.document.body.innerHTML = top.booker.document.body.innerHTML.replace(input,output);
I am having trouble implementing this script. I am not a coder so please give exact, idiot proof advise. :-) Thank You. <script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label> <gcse:search></gcse:search> Here is my html. <!DOCTYPE html> <html> <head><meta charset="UTF-8"> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320"> <style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style> </head><body> <article> <div><script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label> <gcse:search></gcse:search></div> <div><gcse:searchresults></gcse:searchresults></div> </article> </body></html> Here is the above page off a server TEST Thanks again. Hi, I need a very simple script that will do the following : I have a HTML form. I have an input call "title". Say I wrote "fleur-de-lys" I have a text area call "text" When I hit the submit button I want to do : 1. Create a HTML webpage with the name in input : fleur-de-lys.html 2. Add the text in "text" somewhere in the body of that new file fleur-de-lys.html 3. Add a preview of that text somewhere in my index page Basically it's like you post a new article on wordpress or whatever, but I just want something simple no database and just need help on how I do this. Thank you very much ok i am trying to make a countdown timer from 20 seconds when i click start where am i going wrong with this Code: <html>
<head>
</head>
<body>
<script type="text/javascript">
function timer()
{
var milisec=0
var seconds=20
document.counter.d2.value=20
function display()
{
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
display()
}}
</script>
<form name="counter">
<center>
Text Timer<br>
<input type="text" size="30" name="d2"> <br>
<input type="button" onclick="timer()" value="click me to start">
</center>
</form>
</body>
</html>
Hey, so I have successfully used this tutorial; http://articles.sitepoint.com/articl...y-javascript/3 to create a web page that "smoothscrolls" down to a certain point of content on the page. So, I know the java works! My problem is, I have changed the website to be along the X axes and not the Y, so instead of it scrolling "down" the page, I would like it to scroll from left to right. i.e on the X axes not the Y. Is there anyway of doing this by editing that java file? All my buttons work and display the correct part of the website, but the java doesn't work slidiing sideways. Thank you in advance! Darren Hey guys, so I am a designer (not a developer) doing a site for someone. I am playing with some simple free javascripts. I have lightbox and toggler. Both work great individually. They are conflicting and everywhere online says to set the both to onLoad in the body tag. Sounds easy enough. But I can't seem to figure out the call for this script: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/expand.js"></script>
<script type="text/javascript">
$(function() {
$("h2.expand").toggler({method: "fadeToggle"});
});
//--><!]]>
</script>
<body onload="toggler();initLightbox()"> is what is seems like it should be for me. But that isn't working at all. Please help! I feel like I have tried every possible name with the toggler()... If you need more, I can point you to the site itself and you can see all of the (messy) code. Hi all, I know this sounds absurd, but I like to display a clickable image in javascript. I have searched the net for like 2 hours, and I simply CANT find any page that can help me with that extremely simple javascript. This is how its look like in html: Code: <a href="http://www.horse.com"><img src="jul.jpg" width="468" height="80" border="0" /></a> Please! How can I make that simple code in javascript?! Thanks! |
|||||||