If Else for when a button is pressed javascript - javascript

Thank You. I had previously done it like many of you have suggested but the issue I had/have is that my project is a text based game changing according to my choices(Option 1 or Option 2), I attempted to use If statements so that the code would run from one option to the next, with If statements within each other until the end, each option contained within what option you pressed to trigger it. Perhaps that is not the way to got about it.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="dungeonStyle.css">
</head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function codeAddress() {
document.getElementById("gameText").style.visibility = "hidden";
document.getElementById("optionOne").style.visibility = "hidden";
document.getElementById("optionTwo").style.visibility = "hidden";
document.getElementById("bTEXT").style.visibility = "hidden";
document.getElementById("bTEXT2").style.visibility = "hidden";
}
window.onload = codeAddress;
</script>
</head>
<body>
<div id="startup">
<div class="header">
<h1>DUNGEON DUELER</h1>
</div>
<p id="subtitle">The Interactive Novel</p>
<p id="gameDescription">Your choices forge your destiny</p>
<button id = "startButton" onclick="startGame()">Click to begin!
</button>
<p id="gameText">
You're in search of gold and glory. Conquer this dungeon and it shall be yours!
</p>
<button id = "optionOne" onclick="One()">Option One</button>
<button id = "optionTwo" onclick="Two()">Option Two</button>
<p2 id = "bTEXT">Begin </p2>
<p3 id = "bTEXT2">stuff</p3>
<Script>
function startGame() {
document.getElementById("startButton").style.visibility = "hidden";
document.getElementById("subtitle").style.visibility = "hidden";
document.getElementById("gameDescription").style.visibility = "hidden";
document.getElementById("gameText").style.visibility = "visible";
document.getElementById("optionOne").style.visibility = "visible";
document.getElementById("optionTwo").style.visibility = "visible";
document.getElementById("bTEXT").style.visibility = "visible";
document.getElementById("bTEXT2").style.visibility = "visible";
}
</Script>
the issue
if (function one.onclick){
var str = document.getElementById("gameText").innerHTML;
var txt = str.replace("You're in search of gold and glory. Conquer this dungeon and it shall be yours!","blah blah blah");
document.getElementById("gameText").innerHTML = txt;
}
</script>
</div>
</body>
</html>
css is on separate file .
I'll attempt to explain myself the best I can. I'm making a text based game with two button that determine the results. I am trying so that If option one is pressed run the code (change the text thats displayed and hp system) else do other code/option.
My first upload, apologies for any errors. Newbie.

You need to define the Event handlers for the onclick events One and Two.
In the functions One and Two you can define the logic which needs to be implemented. The event handler can be either a function Expression or a function declaration. In your case it is a function Declaration. Also, you can pass the MouseEvent Object in the parameters which contains the information of the event encapsulated in the object, which can provide helpful information about the event.
Change the Script to script
function One(){
var str = document.getElementById("gameText").innerHTML;
var txt = str.replace("You're in search of gold and glory. Conquer this dungeon and it shall be yours!","blah blah blah");
document.getElementById("gameText").innerHTML = txt;
}
function Two(){
// The other logic
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="dungeonStyle.css">
</head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function codeAddress() {
document.getElementById("gameText").style.visibility = "hidden";
document.getElementById("optionOne").style.visibility = "hidden";
document.getElementById("optionTwo").style.visibility = "hidden";
document.getElementById("bTEXT").style.visibility = "hidden";
document.getElementById("bTEXT2").style.visibility = "hidden";
}
window.onload = codeAddress;
</script>
</head>
<body>
<div id="startup">
<div class="header">
<h1>DUNGEON DUELER</h1>
</div>
<p id="subtitle">The Interactive Novel</p>
<p id="gameDescription">Your choices forge your destiny</p>
<button id = "startButton" onclick="startGame()">Click to begin!
</button>
<p id="gameText">
You're in search of gold and glory. Conquer this dungeon and it shall be yours!
</p>
<button id = "optionOne" onclick="One()">Option One</button>
<button id = "optionTwo" onclick="Two()">Option Two</button>
<p2 id = "bTEXT">Begin </p2>
<p3 id = "bTEXT2">stuff</p3>
<script>
function startGame() {
document.getElementById("startButton").style.visibility = "hidden";
document.getElementById("subtitle").style.visibility = "hidden";
document.getElementById("gameDescription").style.visibility = "hidden";
document.getElementById("gameText").style.visibility = "visible";
document.getElementById("optionOne").style.visibility = "visible";
document.getElementById("optionTwo").style.visibility = "visible";
document.getElementById("bTEXT").style.visibility = "visible";
document.getElementById("bTEXT2").style.visibility = "visible";
}
</script>

if (function one.onclick){
should be
function One(){

Two things here. First, i didn't saw the opening script tag in your code (and the first script tag, change Script to script :
<script>
if (function one.onclick){
var str = document.getElementById("gameText").innerHTML;
var txt = str.replace("You're in search of gold and glory. Conquer this
dungeon and it shall be yours!","blah blah blah");
document.getElementById("gameText").innerHTML = txt;
}
</script>
Second, and most important, the IF condition:
<script>
function one() {
var str = document.getElementById("gameText").innerHTML;
var txt = str.replace("You're in search of gold and glory. Conquer this
dungeon and it shall be yours!","blah blah blah");
document.getElementById("gameText").innerHTML = txt;
}
</script>
Try to always use the console.log(), it is your friend always, hehe!

Related

Is there a way to do both this functions at once?

I have created an animation for a theme park. My goal is to let the user decide the total amount of tickets they want. For example if they've selected the button with "two persons" two carts ride across the screen. Then a hidden button shows up that redirects them to a new html page where they can pay two tickets. Here is the html page I have at the moment.
First off, this is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Beginscene</title>
</head>
<link rel="stylesheet" type="text/css" href="./css/karretjestest.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<body>
<img id="rideeen" src="C:\Users\marin\Documents\avans\leerjaar2\Blok 7\PROG\ride.png">
<div class="allebuttons">
<button class="buttons" TYPE="BUTTON" id="editeen" onclick="changeImage();"><div class="myDIV">1 person</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="saveeen"></div>
<button class="buttons" TYPE="BUTTON" id="edittwee" onclick="changeImagetwee();"><div class="myDIV">2 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savetwee"></div>
<button class="buttons" TYPE="BUTTON" id="editdrie" onclick="changeImagedrie();"><div class="myDIV">3 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savedrie"></div>
<button class="buttons" TYPE="BUTTON" id="editvier" onclick="changeImagevier();"><div class="myDIV">4 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savevier"></div>
</div>
<script src="js/attractie.js"></script>
<script src="js/buttons.js"></script>
</body>
</html>
Now I've got two different Javascript files. The first one contains the following:
function changeImage()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ride.png";
return false;
}
function changeImagetwee()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridetwee.png";
return false;
}
function changeImagedrie()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridedrie.png";
return false;
}
function changeImagevier()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridevier.png";
return false;
}
The second file looks like this:
var editeen = document.getElementById("editeen");
var saveeen = document.getElementById("saveeen");
var edittwee = document.getElementById("edittwee");
var savetwee = document.getElementById("savetwee");
var editdrie = document.getElementById("editdrie");
var savedrie = document.getElementById("savedrie");
var editvier = document.getElementById("editvier");
var savevier = document.getElementById("savevier");
editeen.onclick = function() {
saveeen.style.visibility = "visible";
}
edittwee.onclick = function() {
savetwee.style.visibility = "visible";
}
editdrie.onclick = function() {
savedrie.style.visibility = "visible";
}
editvier.onclick = function() {
savevier.style.visibility = "visible";
}
I've come across the problem that there seem to be only two options:
1: When the buttons with text are clicked the ride is changing to another amount of rides, but the hidden buttons don't work.
2: When the buttons with text are clicked the ride doesn't change, but the hidden buttons work.
Does anyone have a solution for this?
All help is appreciated!
if you wants to change the source of the image then show the link button it's will look like this
var double = document.getElementById("editeen");
var img = document.getElementById("rideeen");
var inp = document.getElementById("saveeen");
double.addEventListener("click", function () {
img.src = "/path/image.png";
inp.style.visibility = "visible";
});
or you can send them directly without clicking another button by location
var double = document.getElementById("editeen");
var img = document.getElementById("rideeen");
var inp = document.getElementById("saveeen");
double.addEventListener("click", function () {
img.src = "/path/image.png";
window.location.href = "https://example.com/";
});

Input that searches google

I am making a extension theme for my Chromebook that searches coding sites (like this site, w3schools, ect.) How sould I make it? This is my code so far:
<html>
<head>
</head>
<body>
<input id="input1">
<button onclick="searchGoogle()">Search Google</button>
<script>
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'http://www.google.com/search?q=' + one;
window.location = two;
}
</script>
</body>
</html>
My code doesn't work
When it runs, this pops up:
(Image of my code running)
Is my code wrong?
Any help will be aapreciated.
EDIT
<html>
<head>
<script src="searchgoogle.js">
</script>
</head>
<body>
<input id="input1">
<button id="link">Search Google</button>
</body>
</html>
and
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + one;
window.location = two;
}
});
});
Didn't work either
You declare the function searchGoogle inside the listener function but it is never called. Try with:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
//there is no need to declare a new function here.
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + encodeURIComponent(one);
window.location = two;
});
});

program does not recognize the number in the number input

I need your help :-)
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Der Einmaleins - Trainer</title>
<link href = "style.css" type = "text/css" rel = "stylesheet">
<!--<script src = "script1m1.js"></script>-->
</head>
<body>
<h1>Der Einmaleins - Trainer</h1>
<button type="button" onclick = "start();">Start</button>
<!--<button type = "button" onclick = "fertig();">Fertig!</button>-->
<input id = "erginput" type = "number" >
<!--<label id = "rn1"></label>
<label id = "multiplication"></label>
<label id = "rn2"></label>
<br>-->
<label id = "feedback"></label>
</body>
<script>
function start(){
var ergebnis = document.getElementById("erginput").innerHTML;
document.getElementById("feedback").innerHTML = ergebnis;
}
</script>
</html>
The problem: When I set a number in the number input and click on start, the number is not shown.
Thanks in advance !
Ji W
input elements don't have innerHTML, they have value, so:
function start(){
var ergebnis = document.getElementById("erginput").value;
// Note -------------------------------------------^^^^^
document.getElementById("feedback").innerHTML = ergebnis;
}
(label elements do have innerHTML, which is why there's only one change above.)

Simple javascript onClick Text change

I am new to StackExchange. I have very basic question in JavaScript.
I have created simple JavaScript function changing the color of the text using onClick in that same function i want to change the last word
Here is the example
<!doctype html>
<head>
<title>
Sample Javascript
</title>
<script type="text/javascript">
function colorchange(myid)
{
x = document.getElementById('sample_text');
x.style.color = "red";
x.style.fontWeight = "bold";
text = document.getElementById('sample_text1');
}
</script>
</head>
<body>
<div id="sample_text" onClick="colorchange(1)">Welcome to <span onClick="colorchange(2)" id="sample_text1">Mahaweb</span></div>
</body>
</html>
Kindly help me I want to change the span inner content with the same function.
<!doctype html>
<head>
<title>
Sample Javascript
</title>
<script type="text/javascript">
function colorchange()
{
x = document.getElementById('sample_text');
x.style.color = "red";
x.style.fontWeight = "bold";
document.getElementById('sample_text1').innerHTML = "text";
}
</script>
</head>
<body>
<div id="sample_text" onClick="colorchange()">Welcome to <span onClick="colorchange()" id="sample_text1">Mahaweb</span></div>
</body>
</html>
<script type="text/javascript">
function colorchange(myid)
{
x = document.getElementById('sample_text');
x.style.color = "red";
x.style.fontWeight = "bold";
text = document.getElementById('sample_text1');
if(myid==2){
text.innerHTML="YOUR TEXT HERE";
}
}
</script>
If I understand you correctly, you want to change the span's inner text. As you have already selected the span (var text), try:
text.innerHTML="desiredText";
You can achieve this by changing the property "innerHTML" of your text Element.
Something like:
text.innerHTML = "your_change";
But this is pretty basic stuff. Make sure to checkt out some documentations ;)
I believe this is what you are after (I am using jQuery, a javascript library, which makes this sort of thing much easier)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#sample_text').click(function(){
$(this).find('span').css('color', 'red').css('font-weight', 'bold');
});
</script>

Creating paragraphs based on user input

I'm having trouble, grabbing the user input, and having the onclick operator create additional paragraphs with each click.
Here is my HTML code.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Add Paragraph </title>
<meta charset='utf-8' >
<script src="../js/addPara.js" type="text/javascript"></script>
</head>
<body>
<div>
<input type='text' id='userParagraph' size='20'>
</div>
<div id="par">
<button id='heading'> Add your paragraph</button>
</div>
</body>
</html>
Here is Javascript code:
window.onload = function() {
document.getElementById("addheading").onclick = pCreate;
};
function pCreate() {
var userPar= document.createElement("p");
var parNew = document.getElementById('userParagraph').value;
userPar.innerHTML = par;
var area = document.getElementById("par");
area.appendChild(userPar);
}
userPar.innerHTML = par;
should be
userPar.innerHTML = parNew;
In your code:
> window.onload = function() {
> document.getElementById("addheading").onclick = pCreate;
> };
Where it is possible (perhaps likely) that an element doesn't exist, best to check before calling methods:
var addButton = document.getElementById("addheading");
if (addButton) {
addButton.onclick = pCreate;
}
Also, there is no element with id "addheading", there is a button with id "heading" though.
> function pCreate() {
> var userPar= document.createElement("p");
> var parNew = document.getElementById('userParagraph').value;
> userPar.innerHTML = par;
I think you mean:
userPar.innerHTML = parNew;
if you don't want users inserting random HTML into your page (perhaps you do), you can treat the input as text:
userPar.appendChild(document.createTextNode(parNew));
.
> var area = document.getElementById("par");
> area.appendChild(userPar);
> }
Your variable names and element ids don't make a lot of sense, you might wish to name them after the data or function they represent.
I did it and it worked.
<html lang='en'>
<head>
<title>Add Paragraph </title>
<meta charset='utf-8' >
<script>
window.onload = function() {
document.getElementById("heading").onclick = pCreate;
}
function pCreate() {
var userPar= document.createElement("p");
var parNew = document.getElementById('userParagraph').value;
userPar.innerHTML = parNew;
var area = document.getElementById("par");
area.appendChild(userPar);
}
</script>
</head>
<body>
<div>
<input type='text' id='userParagraph' size='20'>
</div>
<div id="par">
<button id='heading'> Add your paragraph</button>
</div>
</body>
</html>```

Categories

Resources