I have 3 different difficulties for this game I am making. The code I have right now only allows me to click "medium" and "hard". This only changes the elements inside the DIV. I can't seem to make the "easy" button work or even the other ones to work right. Right now it's not replacing the whole DIV with the other but it just displays the content of the other one inside the current one. I think it might be caused by the ".innerHTML" part and I'm not sure what to switch it out with for it all to work.
<script>
function show(param_div_id) {
document.getElementById('divbox3').innerHTML = document.getElementById(param_div_id).innerHTML;
}
</script>
<!-- Border for the game -->
<form id = "divbox3" name = "quiz" >
<div class="game-button" style="width:50%">
<button onclick="show('divbox3')">Easy</button>
<button onclick="show('divbox3med')">Medium</button>
<button onclick="show('divbox3hard')">Hard</button>
</div>
<br>
<br>
<!-- Easy Quiz code -->
<p class = "questions">Most moles have an extra thumb to dig with. <b> True or False? </b></p>
<input id = "textbox" type = "text" name = "q1">
<p class = "questions">What is the smallest country in the world? <b> Tuvalu - Vatican City - Monaco </b></p>
<input id = "textbox" type = "text" name = "q2">
<p class = "questions">What is the biggest atom on the periodic table? <b> Uranium - Francium - Radium - Lead </b></p>
<input id = "textbox" type = "text" name = "q3">
<p class = "questions">Who is the richest man in the world? <b> Bill Gates - Jeff Bezos - Elon Musk </b></p>
<input id = "textbox" type = "text" name = "q4">
<input id = "buttoneasy" type = "button" value = "Finished!" onclick = "check();">
</form>
<div id = "easyscoresheet">
<p id = "easynumber_correct"></p>
<p id = "easymessage"></p>
</div>
<!-- Border for the game -->
<form id = "divbox3med" name = "quizmed" style="display:none;">
<div class="game-button" style="width:50%">
<button onclick="show('divbox3')">Easy</button>
<button onclick="show('divbox3med')">Medium</button>
<button onclick="show('divbox3hard')">Hard</button>
</div>
<br>
<br>
<!-- Medium Quiz code -->
<p class = "questions">What type of animal is Bambi? <b> Elephant - Tiger - Deer </b> </p>
<input id = "textbox" type = "text" name = "q1">
<p class = "questions">Name a US state beginning with K?</p>
<input id = "textbox" type = "text" name = "q2">
<p class = "questions">Who wrote the Harry Potter series? <b> Charles D. - JK Rowling - Vincent V. </b> </p>
<input id = "textbox" type = "text" name = "q3">
<p class = "questions">Who wrote 'The Scarlet Letter'?</p>
<input id = "textbox" type = "text" name = "q4">
<input id = "buttonmed" type = "button" value = "Finished!" onclick = "check();">
</form>
<div id = "medscoresheet">
<p id = "mednumber_correct"></p>
<p id = "medmessage"></p>
</div>
<!-- Border for the game -->
<form id = "divbox3hard" name = "quizhard" style="display:none;">
<div class="game-button" style="width:50%">
<button onclick="show('divbox3')">Easy</button>
<button onclick="show('divbox3med')">Medium</button>
<button onclick="show('divbox3hard')">Hard</button>
</div>
<br>
<br>
<!-- Hard Quiz code -->
<p class = "questions">What chemical element is diamond made of?</p>
<input id = "textbox" type = "text" name = "q1">
<p class = "questions">What game features the terms love, deuce, match and volley?</p>
<input id = "textbox" type = "text" name = "q2">
<p class = "questions">Which planet did Superman come from?</p>
<input id = "textbox" type = "text" name = "q3">
<p class = "questions">How many syllables make up a haiku?</p>
<input id = "textbox" type = "text" name = "q4">
<input id = "buttonhard" type = "button" value = "Finished!" onclick = "check();">
</form>
<div id = "hardscoresheet">
<p id = "hardnumber_correct"></p>
<p id = "hardmessage"></p>
</div>
https://jsfiddle.net/s7vc6y4L/
this is the how I have it set up right now
Thank you
I took a look at the jsFiddle and corrected it.
take a look here:
https://jsfiddle.net/e7862c3d/
function show(param_div_id) {
var quizList = document.getElementsByClassName('quiz');
for(var i=0; i < quizList.length; i++) {
quizList[i].style.display = 'none';
}
document.getElementById(param_div_id).style.display = 'block';
}
You were repeating buttons inside your forms and I think its best to show/hide forms in the instance.
When you start the program, it starts with the easy quiz. When you press "medium", it swaps the code from the divbox3 (easy) form to the code from the divbox3medium (medium) form. This changes the form that you see from the easy level quiz to the medium one. When you press the "easy" button, it swaps the code from the divbox3 (which now contains the code for the medium quiz and no longer the code for the easy quiz) with the code from divbox3 (which your assuming is the easy code, but it is not).
It's like this.
X = Easy
Y = Medium
Z = Hard
Press the Medium Button
X = Y = Medium
Y = Medium
Z = Hard
Press the Easy Button
X = X = Medium
Y = Medium
Z = Hard
To fix this, you could do it the hard way by making a divbox3, divbox3easy, divbox3medium, and divbox3hard. Then you'd change the contents of divbox3 with the contents of whatever level quiz you want, but won't overwrite the code for the easy quiz.
To fix this the easier way, you need to add a visible class to the visible form (not the display: none forms), and then change your show function to do something like this:
function show(param_div_id) {
// Loop through all elements with the visible class and both remove the class and set the display to none
// Add the visible class to param_div_id and set it's display to block
}
Related
what i would like to do is, given a check box with 3 choices (only one is the correct one) I would like to open another html page if, once pressed a button below the check boxes, the answer is correct and, if the answer is wrong, color the text near the check box in red. I'm very new to html and javascript so I have no idea how to start.
Thank you in adavnce!
<div class = "test">
<form action = "pagina2.html">
<input type = "checkbox" id = "answer1" value = "Argentina">
<label for = "answer1"> Argentina </label><br>
<input type = "checkbox" id = "answer2" value = "Brasiliana">
<label for = "answer2"> Brasiliana </label><br>
<input type = "checkbox" id = "answer3" value = "Guatemalteca">
<label for = "answer3"> Guatemalteca</label><br><br>
<button id = "button1" onclick = "changeColor(id)" value = "Submit"> </button>
</form>
</div>
this what i wrote, thank you in advance
The code is supposed to randomly select from the user input to generate a random one.
The HTML includes a form where the user can input values which are saved, but I do not know how to store them in an array in javascript where the let decision is what stores them. When the user inputs an option, they press submit where the javascript appends a child with the option that was input (this is not included) In the javascript, but what is included is the random decision button, if let decision was an array, the button would randomly choose from the array.
The HTML:
let btn = document.getElementById('decide');
let output = document.getElementById('output');
const option_input_el = document.createElement('input');
option_input_el.classList.add('text');
option_input_el.type = 'text';
option_input_el.value = task;
option_input_el.setAttribute('readonly', 'readonly');
let decision = []; /*how to make array of the user inputs*/
btn.addEventListener('click', function() {
var chosen = decision[Math.floor(Math.random() * decision.length)];
output.innerHTML = chosen;
});
//this is our code for the decicon
<body>
<!--Our input of choices-->
<div id="center">
<header>
<h1 id="Title">Input Your Choices</h1>
<form id="form">
<input type="text" id="newT" placeholder="Options" />
<input type="submit" id="sumbitT" value="Add" />
</form>
</header>
</div>
<main>
<section class="option-list">
<h2 id="option">Your Options</h2>
<div id="options"></div>
</section>
<div class="container">
<button id="decide"> Let's Decide! </button>
<div id="output">DECISION</div>
</div>
</main>
your HTML code didn't work properly for what you wanted to achieve, so I had to rework it.
to make an array from user input, you can use push to the input.value to an array.
I used only two functions to do what you asked for. and what happens is simple:
1- when the user click add button, it get user's input then
2- push it into an array.
3- display it in the options div.
4- when the user click decide button, it will select a random value from the displayed array. then display it on the decision div.
var input = document.getElementById("input");
var inputArr = [];
var addBtn = document.getElementById("add-btn");
var display = document.getElementById("options-list");
var decideBtn = document.getElementById("decide-btn");
var resultDisplay = document.getElementById("random-output");
addBtn.addEventListener("click", addAnddisplay);
function addAnddisplay() {
inputArr.push(input.value);
display.textContent = inputArr;
}
decideBtn.addEventListener("click", decide);
function decide() {
var decision = inputArr[Math.floor(Math.random() * inputArr.length)];
resultDisplay.textContent = decision ;
}
<h1 id="Title">Input Your Choices</h1>
<input type="data" id="input" placeholder="Options" />
<button id="add-btn">Add</button>
<!-- <input type="submit" id="add-btn" value="Add" /> -->
<h2>Your Options</h2>
<div id="options-list"></div>
<button id="decide-btn"> Let's Decide! </button>
<div id="random-output"></div>
I have 2 javascript files.
js file 1 contains the time delay for a speech bubble to appear with animation
see js file 1 code
let bubble = document.getElementById("speach-bubble");
let noDisplay; bubble.style.display ="none";
const delay = setTimeout(bubbleAnimate,1500)
function bubbleAnimate()
{
noDisplay = bubble.style.display ="block";
bubble.style.animation="slidein 0.5s 1";
}
with js file 2 I am trying to make a function that when user clicks submit after typing in their name the speech bubble changes to "welcome to your to-do App" + name
this is what I have so far
let welcome ="Welcome to your To-Do App"
windows.onload = function()
{
document.getElementById("userName").onsubmit = function()
{
let text = document.getElementById("nameId");
let changebox = document.getElementById("speach-bubble").innerHTML = welcome + " " + text;
}
}
this is the elements I am working on within my HTML file
<div class=container>
<div class= base>
<div class = screen>
<img src="images/WarGreymon_Render.png" alt="Wargreymon">
<div id ="speach-bubble"> What is your
name?
<div id = "bubble-text">
</div>
</div>
</div>
<div class = "nameInput">
<form id ="userName">
<input type="text" id ="nameId" name="name" placeholder="Type your name here...">
<input type="submit" id ="submit" value="Submit">
</form>
</div>
</div>
is there a way to link js file 1 to js file 2 so that I can influence the speech bubble after userinput has been submitted.
I'm working on a project that I can't get my head around. Fairly new to Javascript, so it isn't too surprising. What I'm attempting is to have a user input their name in the html document, have my javascript file record that name to a variable called userName, then have the next label that appears on the following question add their name to the label for customization. My javascript source file is stored in the same folder as the index.html and is linked in the head of the html file as:
I've included more than is strictly necessary just to show the initializations. Before clicking the button, my 2nd label looks like:
Who are you adventuring with? (Select all that apply)
Solo Couple Family Small Group Large Group
After I click it, it shows:
Thanks [object HTMLInputElement]. who are you going on an adventure with?
First time using stackoverflow, so if I did this wrong let me know.
HTML Section
<!-- Creates app container-->
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<br />
</div>
Javascript File
// Declarations
var lbl;
let userName;
var groupSizeSolo;
var groupSizeCouple;
var groupSizeFamily;
var groupSizeSmall;
var groupSizeLarge;
//Functions
function getUserName(params) {}
function getGroupSize() {
let lbl = document.getElementById("lblGroupSize");
let userName = document.getElementById("inputName");
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
}
When you use getElementById It returns the HTMLInputElement which you are getting.
An Element object describing the DOM element object matching the
specified ID, or null if no matching element was found in the
document. - MDN
So you need the value
let userName = document.getElementById("inputName").value;
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
or
let userName = document.getElementById("inputName");
lbl.innerHTML =
"Thanks " + userName.value + ". who are you going on an adventure with?";
var lbl;
let userName;
var groupSizeSolo;
var groupSizeCouple;
var groupSizeFamily;
var groupSizeSmall;
var groupSizeLarge;
//Functions
function getUserName(params) {}
function getGroupSize() {
let lbl = document.getElementById("lblGroupSize");
let userName = document.getElementById("inputName");
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName.value + ". who are you going on an adventure with?";
}
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<br />
</div>
<div id="lblGroupSize"></div>
</div>
There are few thing you got wrong here.
html -
<html>
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<label id="lbl"></label>
<br />
</div>
</div>
</html
javascript -
function getGroupSize() {
let lbl = document.getElementById("lbl");
let userName = document.getElementById("inputName").value;
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
}
things to note,
Get the value from a HTML , use .value attribute.
Don't declare same variables multiple times.
I have checked the other same posts and I have done numerous changes but nothing seems to work! My goal is to create a form, in html, that when the user is submitting data having clicked on the plane or ship to redirect him in another form A and for the rest (train, bus) to the form B. For that I have the foo function in javascript. But when I click on submit button the onclick function does not work! Any ideas why?
<HTML>
<HEAD> <title> Ticket Choice </title></HEAD>
<SCRIPT type="text/javascript">
function foo(){
alert("Submit button clicked!");
if (document.getElementById('buttonCheck1') ||
(document.getElementById('buttonCheck2')) {
document.forms['form0'].action="C:/Users/Jo/workspace/myAskisisDir/WebContent/formA.html";
}
else {
document.forms['form0'].action="C:/Users/Jo/workspace/myAskisisDir/WebContent/formB.html";
}
}
</SCRIPT>
<BODY>
<h1> Choice of transfer ticket </h1>
<FORM id = "form0" method = "GET">
<fieldset title = "plane">
<input type = "radio" onclick = "javascript:IsCheck(1);" name = "button" id =
"buttonCheck1"> PLANE <br>
</fieldset>
<fieldset title = "ship">
<input type = "radio" onclick = "javascript:IsCheck(2);" name = "button" id =
"buttonCheck2"> SHIP <br>
</fieldset>
<fieldset title = "train">
<input type = "radio" onclick = "javascript:IsCheck(3);" name = "button" id =
"buttonCheck3">train<br>
</fieldset>
<fieldset title = "bus">
<input type = "radio" onclick = "javascript:IsCheck(4);" name = "button" id =
"buttonCheck4"> bus <br>
</fieldset>
<input type="submit" value="submit" onclick = "foo();"/>
<input type = "reset"/>
</FORM>
</BODY>
</HTML>
syntax error
if (document.getElementById('buttonCheck1')||(document.getElementById('buttonCheck2')) {
should have been
if (document.getElementById('buttonCheck1') || document.getElementById('buttonCheck2')) {
now you can feel stupid :P
Try it, this triggers the onclick function. Cheers!