|
JavaScript - Failure To Switch Images And Alerts In A Choose Your Own Adventure Game
I'm just starting out with javascripting and am trying to make a Choose your own Adventure game. My goal is to have the scenes and alerts change depending on the button clicked, but I'm stuck, unfortunately. I keep getting the same alerts repeated and my image doesn't change. I think I'm missing code or have made a mistake somewhere, but have no idea what I've done wrong or left out. I don't know if this type of programming has a more specific name, too, so I wasn't sure what to search for to get help. Hopefully someone can guide me in the right direction. I've included my beginning code below.
Thanks Code: <script type="text/javascript">
var curScene = "0";
function userChoice(decision){
alert(decision);
/*welcomepage*/
if(curScene == 0) {
alert("Welcome to the game. Chose 1 or 2.");
}if(decision == 1) {
alert();
curScene = 1;
}else if(decision == 2){
alert();
curScene = 1;
}
/*Scene1*/
if(curScene == 1){
alert("go left or right");
}if(decision == 1) {
alert("you went left and fell in a hole");
curScene = 3;
}else if(decision == 2){
alert("you go right and come upon a zebra");
curScene = 4;
}
}
document.getElementById("sceneimg").src=
"scene" + curScene + ".jpg";
</script>
<img id="sceneimg" src="scene0.jpg" alt=
"Stick Figure Adventure" />
<input type="button" value="1" onClick=
"userChoice(1)">
<input type="button" value="2" onClick=
"userChoice(2)">
</script>
Similar TutorialsOk, I need some help with this. When you click the close button on your browser, I want it to have a confirmation. Saying "**Click OK to be redirected to a new page**" something like that. If you click "OK" you are redirected to another page. If you hit CANCEL, then it closes out. It doesn't have to be a confirmation. Just needs to be something that has an option. (Maybe return xx?) Anyways, here's what I've got: Code: <script type="text/javascript" language="javascript">
var sure = false;
var lin = false;
function sureF()
{
if(!sure && !lin)
{
sure = true;
var con = confirm("**Are you sure you want to leave?**")
if(con == true)
{
location.href = "http://www.google.com/"
return con;
}
else
{
alert("Sorry")
}
}
}
window.onbeforeunload = sureF;
</script>
What that does, is when you click close on your browser, it will say "Are you sure you want to leave?" you click "OK", and you get redirected to google .com (How I set it) BUT then a popup comes up saying, "Are you sure you want to navigate away?" which I don't want at all. As you can see, my script is quite messed up. Could you help me out? Thanks. I'm trying to get this assignment done for class. I've spent 3 hours on this part alone. These aren't supposed to be that hard. However, it keeps saying that the variable toppings is undefined. Why is it doing that? Especially since it can find the values when I tell it to print them out with an alert. Yet it won't execute the final part where I go to the confirm. Code: <html>
<head>
<script>
function confirm(theForm)
{
var selectedItems = "";
var i = 0;
for(i =0; i < theForm.toppings.length; i++)
{
alert(theForm.toppings[i].value);
if (theForm.toppings[i].checked==true)
{
selectedItems = selectedItems + "\n" + theForm.toppings[i].value;
}
}
var r = confirm("You have selected " + selectedItems + "\n" + "Is this correct?");
if (r == true)
alert("Ok");
}
</script>
</head>
<body>
<form name="form">
<label for="toppings">
<BR><Select name="toppings" MULTIPLE id="toppings">
<OPTION SELECTED> Cheese
<OPTION> Pepperoni
<OPTION > Onions
<OPTION> Sausage
<OPTION> Olives
</SELECT>
<input type="button" value="Confirm selection." onClick="confirm(this.form)">
</form>
</body>
</html>
Never mind, it was because I had named the function "confirm()". A really dumb move on my part. http://becompleteamerica.com/index.p...tact&Itemid=80 It works awesome in all browsers but IE 7 & 8. The custom "alert" is actually a dialog box, with a background fader underneath it, kind of like lightbox. Any ideas why IE doesn't play nice? Thx I know only basic Javascript. I'm making a choose-your-own-adventure game, but want parts of each "page" to display conditionally. For example: You see a sword, a hat, and a helmet here. Take sword Wear hat Wear helmet Continue into swamp Clicking "Take sword" would set a variable "haveSword" to true, and the page would display: You heft the sword, testing its razor edge against your thumb. You see a hat and a helmet here. Wear hat Wear helmet Continue into swamp It tells you the results of your action, then repeats the main part, but updated to reflect any changes. If you then pick "Wear helmet," it shows the action and main paragraph, but updated to reflect that change, etc., all in any order that you choose. This is a simple example, but I would like a system that allows for more complex interactions, that you can perform all in the same "room." Later on in the adventure, when you enter the dragon's lair, you get a page detailing the encounter: if you have the sword, you can attack the dragon, or else you get a paragraph about being powerless. The dragon attacks you, and if you have the helmet, it protects you; if you only have the hat, you get a sentence about it going up in flames before you die; and if you have neither, you just die. The concept is pretty simple, but I don't know how to code it cleanly in Javascript. I currently have each "page" contained in a hidden <div> tag with its own id. I put them in the body instead of as vars in the script because fiction has lots of single and double quotes which need escaped and make it hard to type and read (e.g., \"How\'re you doin\'?\" he asked.). I'd like to keep it that way, but maybe that's unrealistic. I have two placeholder divs in the body. OnLoad puts the first "page" of the adventure into placeholder2 using innerHTML. Clicking on a link in the text, like "Take sword," puts "You heft the sword..." into placeholder1 and refreshes the text of placeholder2. But I need that text to stop displaying the "Take sword" option if "haveSword" is now true, and not mention the sword in the room description... A different story that shows what I'm looking for, but is unfinished and unsustainably messy, can be found at http://taleofwayfinder.webs.com/red_0_2.html tl;dr How can I insert a paragraph using innerHTML (or whatever method) and have it evaluate what parts/options to display when it inserts? Hey all, I've developed a nice javascript code library and wish to sell it. I don't wish competitors to be able to cut and paste pieces from it into their code. The only way to protect it somehow is to rename variables, remove comments and so on - i.e. to apply a javascript obfuscator to it. Please recommend me a javascript obfuscator, and tell me your experience with it. In google I've found javascript obfuscator from Stunnix. It looks good to me, but I didn't try it though. This is a simple basic game i want to make. Its a "What Am I" Riddle... The questions is (In HTML which i already know): I'm as light as a feather but no man can hold me for long. What am I? the answer is: Your Breath. (This is where the JAVASCRIPT comes in) Lets say they guess a rock, have a pop up say: Wrong Answer. Please try again. Lets say they guess Your breath -OR- Breath, have a pop up say: Correct! I want a text field where you can enter your answer, and if they choose ANYTHING but the 2 correct answers above, it will display please try again. Can anyone code this please? Thanks for reading. Ok so i want to work on an EASY basic game. As simple as Guess what number... But there are some twist... Ok So here is my example... (HTML, i know this.)I'm Guessing a number 1-99. What is it? (java) Lets say its 66 and they guess 53, have the text rusult be in a pop up window be: Too low! (java) Lets say they guess 78, have the text rusult be in a pop up window be: Too high! (java) Lets say they guess 100+, have the text rusult be in a pop up window be: Out of range! (java)But lets say they guess 66, have a text result be in a pop up window be: You've won! (java) I want a text field where you can enter your answer, and it will do the actions above. Can anyone code this? Thanks for reading! hi, I have this keypressed function: Code: function keyPressed(event, input) {
if (event.keyCode == 8) {
return true;
}
var char = event.which ? event.which : event.keyCode;
char = String.fromCharCode(char);
var exers = "1234 1234 1234";
return (exers.charAt(input.value.length) == char);
}
This function allow me to press in order the numbers in array (index0). It is works very well. But i want to add an array with more exercises like: Code: var exerc = new Array();
exerc[0]= "1234 1234 1234";
exerc[1] = "5678 5678 5678";
exerc[2] = "9012 9012 9012";
Also, i have a dropdown menu that parser options from a xml file: Code: <form> <select style="width:100px" id='courses'> </select> </form> and my xml file looks like: Code: <courses>
<course title="exercise 1">
<lesson>1234 1234 1234</lesson>
</course>
<course title="exercise 2">
<lesson>5678 5678 5678</lesson>
</course>
<course title="exercise 3">
<lesson>9012 9012 9012</lesson>
</course>
.
.
.
</courses>
*I write the same index because i have two input field. I see the first choose (depend on dropdown) in first input, and i rewrite the same exercise in the second input. So, it's something like an exercise for me and i stack here. - I repeat. It is work with only one index very well. The problem is that, when i add more that one index in the array. Any suggestion about my problem?Javascript it is not my strong point I try this but it is doesn't work.Baybe it is totally wrong! Code: function keyPressed(event, input) {
if (event.keyCode == 8) {
return true;
}
var char = event.which ? event.which : event.keyCode;
char = String.fromCharCode(char);
var exerc = new Array();
exerc[0]= "1234 1234 1234";
exerc[1] = "5678 5678 5678";
exerc[2] = "9012 9012 9012";
for (i=0;i<exerc.length;i++)
{
document.getElementById("courses").selectedIndex;
}
return (exers.charAt(input.value.length) == char);
}
What I am doing is working on a shooting app that will randomly call out different targets to shoot. I have it so it will randomly organize them but I need it so it pulls a single one. Any help would be appreciated! Code: <html>
<body>
<p id="demo">Click the Button to Call out a target</p>
<button onclick="myFunction()">Call Out</button>
<script type="text/javascript">
function myFunction()
{
var myarray=["red","blue", "yellow", "orange"]
myarray.sort(function() {return 0.5 - Math.random()})
var x=document.getElementById("demo");
x.innerHTML=myarray;
}
</script>
</body>
</html>
I am trying to figure out a way to have a page redirect if the mysql connection fails. The issue is that the page is already loaded and the only time this would be needed is if the user tries to perform operations on a loaded page after the session runs out. So basically, I have a page that will allow you to search for an item using ajax, then select an item and press add which will place the item in another table displaying detailed information. Both operations connect to the database using SESSION variables to save the connection information. My goal is to use the "or die()" method to print something that will force a redirect because this could happen in a number of places in the site and I want to try and get them all in one swipe. Here is what seemed like it would be the most promising: Code: $conn = mysql_connect($_SESSION['host'], $_SESSION['username'], $_SESSION['password']) or die("<script>location.href= '../login.php'</script>");
Unfortunately the javascript never runs.... I tried putting alerts also and nothing, but with firebug I can see they are printed. Any idea how I can ensure that the javascript is executed? Thanks in advance. I have encountered unpleasant thing. Code: var htmlfile = new ActiveXObject('htmlfile');
var window = htmlfile.parentWindow;
var document = window.document;
var tag = document.createElement('textarea');
tag.innerHTML = 'any non-empty string';
The example above in JScript environment throws the following exception Quote: htmlfile: Catastrophic failure Any script (JS or VBS) is down when assign the 'innerHTML' property of tags. In these examples I create the TEXTAREA tag but it does not matter. This don't work for ALL block or inline tags. Nevertheless an assignment of the 'innerHTML' property in browsers works fine (see the second example). Code: var tag = document.createElement('textarea');
tag.innerHTML = 'any non-empty string';
I have a question. Is this known bug or feature of the 'htmlfile' object? Or maybe someone of you has encountered this? Hello, I am hoping someone can help me with following search form. As you can see I have created a form but I don't know how to fix the coding so when a user select a category it will add a different hidden filed for that option for example: When the user selects category "Men" the hidden filed Code: <INPUT TYPE="HIDDEN" NAME="REFERRER" VALUE="http://men.com/acatalog/"> will be added and when the user selects category "Kids" the hidden filed Code: <INPUT TYPE="HIDDEN" NAME="REFERRER" VALUE="http://kids.com/acatalog/"> will be added and so on... Here is my form coding I am using: Code: <form name="simplesearch" method="get" action="" onsubmit="ssite=document.getElementById('sitelist');this.action=ssite.options[ssite.selectedIndex].value;return true;">
<input type="hidden" name="page" value="search" />
<input type="hidden" name="PR" value="-1" />
<input type="hidden" name="TB" value="A" />
<input type="hidden" name="NOLOGIN" value="1" /><input align="top" class="main_search_box" name="SS" type="text" value="search for ..." onfocus="this.value='';">
Search within:
<select id="sitelist">
<option value="">Select Catagory</option>
<option value="http://kids.com/cgi-bin/ss000001.pl">kids</option>
<option value="http://men.com/cgi-bin/ss000001.pl">men</option>
<option value="http://women.com/cgi-bin/ss000001.pl">women</option>
</select><input type="submit" class="button" name="ACTION" value="Go!">
</form>
Also I have one more question how do I make the "Select Catagory" a Must Choose and if not chosen to give message that say"Please Select a Category" Thank you in advance for any help you can give me... I am a bigginer so please go easy on me From my main page, I have a dropdown-login box. Is it possible login form go to my user's control panel if the login was successful, or go to the login page if it's not? Ideally, I don't want to use a re-direct. Do I need to use ajax? Thank you! Double post I'm sorry. Please look at my other one.
Hey folks. I am needing some help with an error I'm getting from a project I'm working on. First off let me preface this all with the fact that I'm a total javascript noob. I'm really trying to understand what I'm doing wrong. So any help or advice is MORE than welcome. Here's what is happening. I found this code that will duplicate a row in a table and modifiy the name of a input in the row. Well for my purposes I have two different tables I need to work with. (each one idividually) So I changed the code a bit to make it accecpt a variable to use for the table name. (before it was static) and now I'm getting a error. Code: Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER)" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.tourandtravelnow.com/admin/scripts/faxPageScript.js :: addRow :: line 14" data: no] This is the old code that would work (only for one of the tables) Code: var clone;
function cloneRow(){
var rows=document.getElementById('mytab').getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(){
var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow();
}
onload=cloneRow;
and here is my code that doesn't work. Code: var clone;
function cloneRow(mytab){
var rows=document.getElementById(mytab).getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(mytab){
alert(mytab);
var tbo=document.getElementById(mytab).getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow(mytab);
}
onload=cloneRow(mytab);
So like I said any help would AWESOME! have a great day. Kevin. I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() Hi, I want the user to choose one option in each of the radio group. But when I click only one button out of all 12 buttons, it allows the user to submit. How do I change it to a way that the user must click one option for each group in order to allow him/her to submit the form? Javascript Code: function valbutton(thisform)
{
// place any other field validations that you require here
// validate myradiobuttons
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--)
{
if (thisform.myradiobutton[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton1.length-1; i > -1; i--)
{
if (thisform.myradiobutton1[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton2.length-1; i > -1; i--)
{
if (thisform.myradiobutton2[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton3.length-1; i > -1; i--)
{
if (thisform.myradiobutton3[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton4.length-1; i > -1; i--)
{
if (thisform.myradiobutton4[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton5.length-1; i > -1; i--)
{
if (thisform.myradiobutton5[i].checked)
{
myOption = i; i = -1;
}
}
if (myOption == -1)
{
alert("You must select a radio button");
return false;
}
// place any other field validations that you require here
thisform.submit(); // this line submits the form after validation
}
HTML Code: <p>Cookies</p> <input type="radio" value="1st value" name="myradiobutton" class="style31" />Enable <input type="radio" value="2nd value" name="myradiobutton" class="style31" />Enable<br /> <p>Java</p> <input type="radio" value="3rd value" name="myradiobutton1" class="style31" />Enable <input type="radio" value="4th value" name="myradiobutton1" class="style31" />Enable<br /> <p>Javascript</p> <input type="radio" value="5th value" name="myradiobutton2" class="style31" />Enable <input type="radio" value="6th value" name="myradiobutton2" class="style31" />Enable<br /> <p>PHP</p> <input type="radio" value="7th value" name="myradiobutton3" class="style31" />Enable <input type="radio" value="8th value" name="myradiobutton3" class="style31" />Enable<br /> <p>C#</p> <input type="radio" value="9th value" name="myradiobutton4" class="style31" />Enable <input type="radio" value="10th value" name="myradiobutton4" class="style31" />Enable<br /> <p>CSS</p> <input type="radio" value="11st value" name="myradiobutton5" class="style31" />Enable <input type="radio" value="12nd value" name="myradiobutton5" class="style31" />Enable<br /> <input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" /> <input type="reset" name="reset" value="Clear" /> Hello all I have a video playlist useing iframe http://alohainvesting.com/html5/Html5player.html Is there a way to get same results without iframes? i just want to switch items on nav to the wrapper window. can this be done? Thanks just a general question really... now that I've finally started using switches, it seems to me that they're just a big if /else if statement, with an else thrown in at the end for the default. but that can't be right. I know that in javascript there are a million ways to achieve the same result, but why would they (whoever they are) go to the trouble of making two basic operations that do exactly the same thing? to me it seems that switches are better for lots of conditions and if else is a quick way to work with two or three, but apart from readability, are there any inherent advantages in choosing one approach over the other? all opinions appreciated, and I hope I don't start another argument. |
|||||||