I am new to JavaScript and HTML but am slowly getting HTML but JavaScript I am struggling with. I am stuck on a problem that is having me have a counter start when I click the Start Quiz button. I am also having a problem with an Alert Box showing up when I click the Submit Answers button. I am not looking for someone to give me the answer but some guidance would be helpful.
<head>
<meta charset="UTF-8" />
<title>Trivia Quiz: Movies</title>
<script src="modernizr-1.5.js" type="text/javascript" ></script>
<link href="quiz.css" rel="stylesheet" type="text/css" />
<script src="functions.js" type="text/javascript" ></script>
<script type="text/javascript">
var seconds = "0";
var clockID;
</script>
<script type="text/javascript">
function runClock() {
seconds++;
document.getElementByID('quizclock')value=seconds;
}
</script>
<script type="text/javascript">
function startClock() {
showQuiz();
clockId=setInterval ("runClock()", 1000);
}
</script>
<script type="text/javascript">
function stopClock() {
clearInterval (clockId);
correctAns = gradeQuiz();
window.alert("You have" + correctAns + "correct of 5 in" + timer + "seconds");
}
</script>
</head>
<body onload="resetQuiz()">
<form id="quiz" name="quiz" action="">
<header>
<img src="tlogo.png" alt="Online Trivia" />
<nav class="horizontal">
<ul>
<li>Top Scores</li>
<li>Submit a Quiz</li>
<li>Quiz Bowl</li>
<li>Your Account</li>
</ul>
</nav>
</header>
<nav class="vertical">
<h1>Categories</h1>
<ul>
<li>Arts</li>
<li>Books</li>
<li>Culture</li>
<li>Geography</li>
<li>History</li>
<li>Movies</li>
<li>Music</li>
<li>People</li>
<li>Random</li>
<li>Science</li>
<li>Sports</li>
<li>Television</li>
</ul>
</nav>
<section id="main">
<h1>Movie Trivia</h1>
<p>
All of our trivia quizzes are scored on the number of correct
answers and the time required to submit those answers.
</p>
<p>
To start the quiz, click the <b>Start Quiz</b> button below,
which will reveal the first page of quiz questions and start
the timer. When you have completed the questions, click
the <b>Submit Answers</b> button on the quiz form.
</p>
<aside>
<input name="quizclock" id="quizclock" value="0" />
<input id="start" type="button" value="Start Quiz" onclick="startClock()" />
<input id="stop" type="button" value="Submit Answers" onclick="stopClock()"/>
</aside>
</section>
</form>
</body>
The code that is provided is partial and I believe that is the only part of the code that is needed for the question. Thanks.
Reset Function as requested:
function resetQuiz() {
document.quiz.quizclock.value = 0;
for (i=0; i<document.quiz.elements.length; i++) document.quiz.elements[i].disabled=false;
document.quiz.stop.disabled = true;
}
You have two errors.
1. document.getElementByID('sth') should be document.getElementById('sth').
Notice the lowercase d at the end of Id.
2. You should put a . before value like this:
document.getElementById('quizclock').value = seconds;
This is all assuming that you have implemented startQuiz(), resetQuiz() and showQuiz() and they are working correctly.
Hope Helps;
Try to run the code snippet!
var Quiz = (function($) {
var updateView = function(timeElapsed) {
$('#result').html(timeElapsed);
};
function Quiz() {
updateView(this.timing);
}
Quiz.prototype.timing = 0;
Quiz.prototype.start = function() {
var self = this;
if(self._isCounting) {
return;
}
return this._interval = (function() {
self._isCounting = true;
var interval = window.setInterval(function() {
self.timing += 1;
updateView(self.timing);
}, 1000);
return interval;
})();
};
Quiz.prototype.stop = function() {
window.clearInterval(this._interval);
this._isCounting = false;
return this;
};
Quiz.factory = function() {
return new Quiz();
};
return Quiz;
})(window.jQuery);
window.jQuery(document).ready(function($) {
var historyQuiz = Quiz.factory();
historyQuiz.start();
var modalIsOpen = false;
$('#stop').click(historyQuiz.stop.bind(historyQuiz));
$('#resume').click(historyQuiz.start.bind(historyQuiz));
$('#submitQuizData').click(function(event) {
historyQuiz.stop();
return $.Deferred().resolve(historyQuiz.timing)
.then(function(val) {
return $('#quizResult').html(val + 's')
})
.then(function(element) { return element.fadeIn(); })
.then(function(element) { modalIsOpen = true; })
});
$('#quizResult').click(function() {
if(modalIsOpen) { modalIsOpen = false; return $('#quizResult').fadeOut(); }
});
});
.quiz-result {
display: none;
text-align: center;
width: 300px;
height: 300px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<button id="stop">STOP QUIZ</button>
<button id="resume">RESUME QUIZ</button>
<button id="submitQuizData">SUBMIT QUIZ DATA</button>
<div id="quizResult" class="quiz-result"></div>
Related
I have tried to solve this problem for a week but I can't find any solutions.
When I put removeEventListener in the function MediaQuery3(z) it doesn't work.
I used MediaQuery to add an event for mobile phone users and removed it for desktop users.
let firstNumber=0;
let secondNumber = 0;
function MediaQuery3(z) {
let inputSearch = document.getElementById("input-search");
let searchBtn = document.getElementById("search-btn");
if (z.matches) {
if (firstNumber==0) {
searchBtn.addEventListener("click", clickSearch);
function clickSearch() {
if (inputSearch.style.display==="none") {
inputSearch.style.display="block";
} else{
inputSearch.style.display="none";
}
}
firstNumber=1;
secondNumber=0
}
} else{
if (secondNumber==0) {
searchBtn.removeEventListener("click", clickSearch);
inputSearch.style.display="block";
}
firstNumber=0;
secondNumber=1
}}
var z = window.matchMedia("(max-width: 430px)");
MediaQuery3(z);
z.addListener(MediaQuery3) ;
<!doctype html >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-sm navbar-dark">
<img src="d82a392b-6975-49e1-a8fd-a6e28a195b2b_200x200.png" alt="logo" id="logo-image">
<form class="form-inline" >
<button id="search-btn" type="button" ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABD0lEQVRIie2UPW7CQBCFP5IS0gEnoQdyAxAHSQoUUSD+Gm4DIiegoITkAOEMJIQWTDFvwY3xrqFAUZ402rX95r2xvTPwV1EGRsAHsFOsgCFQula8BWyBKCF+gOY14gcJTYAqkFfUgKme7YFGqHg5Vnn7Au9NnG+gGGIw4lx5GmbiDkIMPpVU9eDWxV2FGPwqqeDBfRJ3m0Z8iO2jgGJyvsS4wVprxSPPcb5CDN61vngYvGqdeXBPKGFNFGFHMQkdcTZk6Oom1kSRqqtjP70APGNv6Tq6Gyru0MCaKGlUbCTurvtZTIpYEy2x47vTfsD5s8RNM5mkwY0MF+N/k7sy6bmbjzc0WGAzak7gGL9vHAG+Ol6n6x8u5AAAAABJRU5ErkJggg=="/></button>
<input id="input-search" class="form-control" type="text" placeholder="" aria-label="Search">
</form>
<img src="https://img.icons8.com/pastel-glyph/64/000000/shopping-cart--v1.png" id="cart">
</nav>
</body>
</html>
The listener you add with addEventListener has to be the exact same reference to the exact same function that you give to removeEventListener. But since you've defined clickSearch as a nested function, it is actually given a different reference every time MediaQuery3 is executed, because each one is bound to a different closure. If you move clickSearch outside of the function so it's not nested, the reference will be the same both times and it'll work properly.
let firstNumber = 0;
let secondNumber = 0;
function clickSearch() {
let inputSearch = document.getElementById("input-search");
if (inputSearch.style.display === "none") {
inputSearch.style.display = "block";
} else {
inputSearch.style.display = "none";
}
}
function MediaQuery3(z) {
let inputSearch = document.getElementById("input-search");
let searchBtn = document.getElementById("search-btn");
if (z.matches) {
if (firstNumber == 0) {
searchBtn.addEventListener("click", clickSearch);
firstNumber = 1;
secondNumber = 0;
}
} else {
if (secondNumber == 0) {
searchBtn.removeEventListener("click", clickSearch);
inputSearch.style.display = "block";
}
firstNumber = 0;
secondNumber = 1;
}
}
var z = window.matchMedia("(max-width: 430px)");
MediaQuery3(z);
z.addListener(MediaQuery3);
<!doctype html >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-sm navbar-dark">
<img src="d82a392b-6975-49e1-a8fd-a6e28a195b2b_200x200.png" alt="logo" id="logo-image">
<form class="form-inline" >
<button id="search-btn" type="button" ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABD0lEQVRIie2UPW7CQBCFP5IS0gEnoQdyAxAHSQoUUSD+Gm4DIiegoITkAOEMJIQWTDFvwY3xrqFAUZ402rX95r2xvTPwV1EGRsAHsFOsgCFQula8BWyBKCF+gOY14gcJTYAqkFfUgKme7YFGqHg5Vnn7Au9NnG+gGGIw4lx5GmbiDkIMPpVU9eDWxV2FGPwqqeDBfRJ3m0Z8iO2jgGJyvsS4wVprxSPPcb5CDN61vngYvGqdeXBPKGFNFGFHMQkdcTZk6Oom1kSRqqtjP70APGNv6Tq6Gyru0MCaKGlUbCTurvtZTIpYEy2x47vTfsD5s8RNM5mkwY0MF+N/k7sy6bmbjzc0WGAzak7gGL9vHAG+Ol6n6x8u5AAAAABJRU5ErkJggg=="/></button>
<input id="input-search" class="form-control" type="text" placeholder="" aria-label="Search">
</form>
<img src="https://img.icons8.com/pastel-glyph/64/000000/shopping-cart--v1.png" id="cart">
</nav>
</body>
</html>
I have created a container which displays the texts each time i click on a button. My code works fine but each time i click on a button the previous entry which is displayed in the container erases. I want to keep the previous entry and make the next text appear in the next line each time i click on a new button. Below is my code.Thank you
function appChangeFunction() {
holdtext.innerText = appchange.innerText;
}
function sharedChangeFunction() {
holdtext.innerText = sharedchange.innerText;
}
<div id="container">
<TEXTAREA ID="holdtext" rows="15" cols="70"></TEXTAREA><br><br>
</div>
<style>#container {width:100%; text-align:center;}</style>
<link rel="stylesheet" type="text/css" href="css.css" />
<button onclick="appChangeFunction()" style="background-color:white" >App Change</button> 
<button onclick="sharedChangeFunction()" style="background-color:white" >Shared Change</button> 
<SPAN ID="appchange" STYLE="display:none"> Text Under App Change
</SPAN>
<SPAN ID="sharedchange" STYLE="display:none"> Text Under Shared Change
</SPAN>
Just add the old text to the new using + sign :
<script>
function appChangeFunction() {
holdtext.innerText = holdtext.innerText + '\n' + appchange.innerText;
}
function sharedChangeFunction() {
holdtext.innerText = holdtext.innerText + '\n' + sharedchange.innerText;
}
</script>
Or using += sign and \n for new lines :
<script>
function appChangeFunction() {
holdtext.innerText += '\n'+appchange.innerText;
}
function sharedChangeFunction() {
holdtext.innerText += '\n'+sharedchange.innerText;
}
</script>
Hope this helps.
Replace your script tag with:
<script>
function appChangeFunction() {
holdtext.innerText += "\n"+appchange.innerText;
}
function sharedChangeFunction() {
holdtext.innerText += "\n"+sharedchange.innerText;
}
</script>
If first get the container data then it will be added the text
<html>
<body>
<div id="container">
<TEXTAREA ID="holdtext" rows="30" cols="70">
</TEXTAREA><br><br>
</div>
<style>#container {width:100%; text-align:center;}</style>
<link rel="stylesheet" type="text/css" href="css.css" />
<button onclick="appChangeFunction()" style="background-color:white" >App Change</button> 
<button onclick="sharedChangeFunction()" style="background-color:white" >Shared Change</button> 
<SPAN ID="appchange" STYLE="display:none"> Text Under App Change
</span>
<SPAN ID="sharedchange" STYLE="display:none"> Text Under Shared Change
</SPAN>
</body>
</html>
<script>
function appChangeFunction() {
var x = document.getElementById("holdtext").innerHTML;
holdtext.innerText = x + appchange.innerText;
}
function sharedChangeFunction() {
var x = document.getElementById("holdtext").innerHTML;
holdtext.innerText = x + sharedchange.innerText;
}
</script>
I have two divs, called loginpending and loggedin, which I am trying to configure so that once a button (button) is clicked, the divs will "flicker" between one being on and one being off.
For example, in this current state (with loginpending's display as block and loggedin's display as none), once the button is clicked, loginpending's display will become none and loggedin's display will become block through the function loginUpdate, which is then called through launch depending on what the state of each div is.
However, it doesn't work - the state of the buttons don't change at all once the button is clicked.
Help!
HTML code:
<div id="loginpending" style="display:block;">
Signup/Login here!
</div>
<div id="loggedin" style="display:none;">
Hello!
</div>
<button id="button" onclick="launch()">Hello!</button>
Javascript code (with Jquery):
var logincheck = 0;
function loginUpdate() {
"use strict";
$("#loginpending").toggle();
$("#loggedin").toggle();
}
function launch() {
"use strict";
var loginpending = document.getElementById("loginpending").style.display;
var loggedin = document.getElementById("loggedin").style.display;
window.alert(loginpending);
window.alert(loggedin);
if (loginpending === "none") {
logincheck = 0;
loginUpdate();
} else if (loggedin === "none") {
logincheck = 1;
loginUpdate();
} else {
logincheck = 0;
$("#loggedin").toggle();
}
}
Right now your button is submitting the from which refreshes the page reloadsin its original state.
You need to set the type of button to type="button"
<button id="button" type="button" onclick="launch()">Hello!</button>
$(document).ready(function() {
$('button').on('click', function(){
$('div').toggleClass('hidden');
})
});
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="loginpending" class="">
Signup/Login here!
</div>
<div id="loggedin" class="hidden">
Hello!
</div>
<button id="button" onclick="">Hello!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
</body>
</html>
Code with jQuery
I tried to use your original code as much as I could.
var logincheck = 0;
$("#button").click(function() {
launch();
});
function loginUpdate() {
"use strict";
$("#loginpending").toggle();
$("#loggedin").toggle();
}
function launch() {
"use strict";
var loginpending = $("#loginpending").is(":hidden");
var loggedin = $("#loggedin").is(":hidden");
if(loginpending)
logincheck = 0;
else if (loggedin)
logincheck = 1
else
logincheck = 0;
loginUpdate();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loginpending" style="display:block;">
Signup/Login here!
</div>
<div id="loggedin" style="display:none;">
Hello!
</div>
<button id="button" type="button">Hello!</button>
Gotta try this
$(function() {
var logincheck = 0;
function loginUpdate() {
"use strict";
$("#loginpending").toggle();
$("#loggedin").toggle();
}
$('#button').on('click', function(){
"use strict";
if(logincheck == 0) {
logincheck = 1;
}else{
logincheck = 0;
}
loginUpdate();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loginpending" style="display:block;">
Signup/Login here!
</div>
<div id="loggedin" style="display:none;">
Hello!
</div>
<button id="button">Hello!</button>
I am trying to to increment/decrement a value in a paragraph when a button is clicked.
$(document).ready(function() {
var breakTime = 5;
var section = 25;
var start = "Start";
var stop = "Stop";
function Pomodoro(element, target) {
this.element = element;
this.target = target;
};
Pomodoro.prototype.incrementer = function incrementer() {
// this takes care of break and section timers incrementing
this.element.click(function() {
breakTime++;
var el = this.target;
el.html(breakTime);
});
};
// end
Pomodoro.prototype.decrementer = function decrementer() {
// this takes care of break and section timers incrementing
breakerDec.element.click(function() {
breakTime--;
var el = breakerDec.target.html(breakTime);
});
};
// end
var breakerInc = new Pomodoro();
var ele = $("#inner1");
var tar = $("#par");
breakerInc.element = ele;
breakerInc.target = tar;
breakerInc.incrementer.bind(breakerInc);
//end
var breakerDec = new Pomodoro();
breakerDec.element = $("#inner2");
breakerDec.target = $("#par");
breakerDec.decrementer();
var sectionInc = new Pomodoro($("#inner3"), $("#par2"));
sectionInc.incrementer.bind(sectionInc);
});
and i am getting no result when i click the button.
this is the html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pomodoro Timer</title><!-- End of Title -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="div div-1"><p id="par" class="breaktime-1">5</p>
<div class="inner-div inner-1"><button id="inner1" type="button" class="btn">+</button></div>
<div class="inner-div inner-2"><button id="inner2" type="button" class="btn">-</button></div>
</div>
<div class="div div-2"><p id="par2" class="breaktime">25</p>
<div class="inner-div inner-1"><button id="inner3" type="button" class="btn">+</button></div>
<div class="inner-div inner-2"><button id="inner4" type="button" class="btn">-</button></div>
</div>
</div>
<div class="div div-3">
<h3 class="heading">section</h3>
<button type="button" class="btn-Start-Stop"></button
</div>
<div><p></p></div>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Here is one (trimmed-down) solution just using vanilla javascript:
function changeValue() {
var breaktime = this.parentNode.getElementsByClassName('breaktime')[0];
var val = breaktime.innerHTML;
if (this.className === 'increment') {
val++;
}
else if (this.className === 'decrement') {
val--;
}
breaktime.innerHTML = val;
}
function startStop() {
var values = [];
var breaktimes = document.getElementsByClassName('breaktime');
breaktimes[1].classList.toggle('decrementing');
if (breaktimes[1].classList.contains('decrementing') === true) {
values[1] = parseInt(breaktimes[1].innerHTML);
values[1]--;
breaktimes[1].innerHTML = values[1];
var decrementer = setInterval(function(){
values[0] = parseInt(breaktimes[0].innerHTML);
values[1] = parseInt(breaktimes[1].innerHTML);
if (breaktimes[1].classList.contains('decrementing') !== true) {
clearInterval(decrementer);
}
values[1]--;
breaktimes[1].innerHTML = values[1];
if (values[1] === values[0]) {
window.alert('The counter has reached ' + values[1]);
clearInterval(decrementer);
}
}, 1000);
}
}
var buttons = document.getElementsByTagName('button');
var startStopButton = buttons[(buttons.length -1)];
for (var i = 0; (i+1) < buttons.length; i++) {
buttons[i].addEventListener('click',changeValue,false);
}
startStopButton.addEventListener('click',startStop,false);
<section>
<div>
<p class="breaktime">5</p>
<button id="inner1" type="button" class="increment">+</button>
<button id="inner2" type="button" class="decrement">-</button>
</div>
<div>
<p class="breaktime">25</p>
<button id="inner3" type="button" class="increment">+</button>
<button id="inner4" type="button" class="decrement">-</button>
</div>
<div>
<h3>Section</h3>
<button type="button" class="btn-Start-Stop">Start / Stop</button>
</div>
<div>
<p></p>
</div>
</section>
If you'd like to implement logic using constructors, you can bind events inside of initialization of your instance.
Here is reworked your code based on your html. But code could be improved, so Pomodoro instance can be able not only to decrease or increase, but do both functions.
Also some template engine can give you ability to easy define amount of increase/decrease blocks you want to add to your page.
I am having trouble with this code. I am trying to add an eliminate link at the end but I cant seem to eliminate all of the boxes within the set of 5 that appear when I press the add link. I want to be able to delete all the boxes that are within the set of five and nothing else. What I have tried to do is put this line of code at the end of the var box_html5 but it does not work. This is the function that deletes a box I want it to delete the boxes.
Remove
I have tried to make a loop within the statement but it is not coming out right.
I have also thought about making an if statement where the above piece of code would be inside it and state that if that link is pressed then remove box_html1, box_html2, box_html3... etc. For the set of 5 chosen. I have also tried to echo the code like this:
echo ('Remove');
and it still does not seem to work.
<?php
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Movie Night</h1>
<div class="my-form">
<form role="form" method="post">
<p class="text-box">
<label for="box1">Genre<span class="box-number">1</span></label>
<input type="text" name="boxes[]" value="" id="box1" />
<a class="add-box" href="#">Add More</a>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 15 < n ) {
alert('Too many. Not enought Time to watch');
return false;
}
var box_html1 = $('<p class="text-box">Movie<input name="mov1" type="text"></p>');
box_html1.hide();
$('.my-form p.text-box:last').after(box_html1);
box_html1.fadeIn('slow');
var box_html2 = $('<p class="text-box">Movie<input name="mov2" type="text"></p>');
box_html2.hide();
$('.my-form p.text-box:last').after(box_html2);
box_html2.fadeIn('slow');
var box_html3 = $('<p class="text-box">Movie<input name="mov3" type="text"></p>');
box_html3.hide();
$('.my-form p.text-box:last').after(box_html3);
box_html3.fadeIn('slow');
var box_html4 = $('<p class="text-box">Movie<input name="mov4" type="text">Remove</p>');
box_html4.hide();
$('.my-form p.text-box:last').after(box_html4);
box_html4.fadeIn('slow');
var box_html5 = $('<p class="text-box">Movie<input name="mov5" type="text"></p>');
box_html5.hide();
$('.my-form p.text-box:last').after(box_html5);
box_html5.fadeIn('slow');
<!--Remove-->
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
You need to explore index and slice jquery functions.
Remove action handler in this case:
$('.my-form').on('click', '.remove-box', function(event)
{
var index = $(this).parent().index();
$('.text-box').slice( index - 3, index + 2 ).remove();
event.preventDefault();
});
FIDDLE: http://jsfiddle.net/ejcXd/4/