I'm new to making extensions and this is driving me crazy. My countdown works when I load the page locally in the browser, but when I try to make it an extension, only the html shows, and the javascript doesn't work (ex. When I click on the start button when launching the extension, nothing changes and the countdown never starts.) I put my code below, dows it have somethning to do with me not putting the javascript in the "background"? I didnt understand that part of the Chrome Docs
<html>
<head>
</head>
<body>
<script>var countdown;
var countdown_number=10000*3600
var days;
var hours;
var minutes;
var seconds;
function countdown_init() {
//countdown_number = 11;
countdown_trigger();
}
function countdown_trigger() {
if(countdown_number > 0) {
countdown_number--;
//store()
days = Math.floor(countdown_number/(3600*24))
hours = (Math.floor(countdown_number/(3600))-days*24) % 24;
minutes = (Math.floor(countdown_number/(60))-hours*60) % 60;
seconds = (Math.floor(countdown_number)-minutes*60) % 60;
update_counter();
if(countdown_number > 0) {
countdown = setTimeout('countdown_trigger()', 1000);
}
}
}
function update_counter(){
document.getElementById('timer_text').innerHTML = "Days: "+days+"<br>"+
" Hours: " + hours +"<br>"+" Minutes: " + minutes +"<br>"+" Seconds: " + seconds;
}
function countdown_clear() {
clearTimeout(countdown);
}
function countdown_reset(){
countdown_number=10000*3600;
update_counter();
clearTimeout(countdown);
}
function writeItem(){
localStorage[1] = countdown_number;
}
function returnItem() {
var stored = localStorage[1];
document.getElementById('item').innerHTML=countdown_number;
}
function store(){
writeItem();
}
</script>
<div>
<h1> 10,000 Hours Timer </h1>
<input type="button" value="start countdown" onclick="countdown_init()" />
<input type="button" value="stop countdown" onclick="countdown_clear()" />
<input type="button" value="reset" onclick="countdown_reset()"/>
<input type="button" value="store" onclick="store()"/>
<p id="item">Hi</p>
</div>
<div id="timer_text">Ready To Start?</div>
</body>
</html>
Chrome extension doesn't support inline JavaScript.
http://developer.chrome.com/extensions/contentSecurityPolicy.html
Try this JS:-
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#start').addEventListener('click', countdown_init);
document.querySelector('#stop').addEventListener('click', countdown_clear);
document.querySelector('#reset').addEventListener('click', countdown_reset);
document.querySelector('#store').addEventListener('click', store);
});
var countdown_number=10000*3600;
var days;
var hours;
var minutes;
var seconds;
var countdown;
function countdown_init(e) {
//countdown_number = 11;
countdown_trigger();
}
function countdown_trigger() {
if(countdown_number > 0) {
countdown_number--;
//store()
days = Math.floor(countdown_number/(3600*24));
hours = (Math.floor(countdown_number/(3600))-days*24) % 24;
minutes = (Math.floor(countdown_number/(60))-hours*60) % 60;
seconds = (Math.floor(countdown_number)-minutes*60) % 60;
update_counter();
if(countdown_number > 0) {
countdown = setTimeout(countdown_init, 1000);
}
}
}
function update_counter(){
document.getElementById('timer_text').innerHTML = "Days: "+days+"<br>"+
" Hours: " + hours +"<br>"+" Minutes: " + minutes +"<br>"+" Seconds: " + seconds;
}
function countdown_clear(e) {
clearTimeout(countdown);
}
function countdown_reset(e){
countdown_number=10000*3600;
update_counter();
clearTimeout(countdown);
}
function writeItem(){
localStorage[1] = countdown_number;
}
function returnItem() {
var stored = localStorage[1];
document.getElementById('item').innerHTML=countdown_number;
}
function store(e){
writeItem();
}
And HTML:-
<div>
<h1> 10,000 Hours Timer </h1>
<input type="button" id="start" value="start countdown" />
<input type="button" id="stop" value="stop countdown" />
<input type="button" id="reset" value="reset" />
<input type="button" id="store" value="store" />
<p id="item">Hi</p>
</div>
<div id="timer_text">Ready To Start?</div>
Related
I have 3 prompts, the first is to enter hours and the second minutes, when the user click on button:add n minutes, I would like to display a third prompt by proposing several minutes.
My problem is that my command prompt is executed before the clik on button.
My HTML
<body >
<h1>Exercise 8</h1>
<label>Hours : <input type="text" id='h' /></label>
<label>Minutes : <input type="text" id='m' /></label>
<button id="btn1">Pass 1 minute</button>
<button id="btn2">Add n minutes</button>
<script src="script.js"></script>
</body>
My JS
var hours = parseInt(prompt('Enter your hours please : '));
var minutes = parseInt(prompt('Enter your minutes please : '));
var btnPassOneMinute = document.getElementById('btn1');
var btnPass_N_Minute = document.getElementById('btn2');
/*if (hours != null) {
main();
}*/
btnPassOneMinute.addEventListener('click', addOneMinute);
btnPass_N_Minute.addEventListener('click', add_N_Minute);
main();
addOneMinute();
add_N_Minute();
function main(){
if(minutes > 59){
minutes = 0;
hours += 1;
}
if(hours > 23){
hours = 0;
}
document.getElementById('h').value = hours;
document.getElementById('m').value = minutes;
}
function addOneMinute(){
main();
minutes += 1;
}
function add_N_Minute(){
//main();
var addMinute = parseInt(prompt('Add your minutes : '));
minutes += addMinute;
if(addMinute > 59){
minutes = 0;
}
if(minutes > 59){
minutes = 0;
hours += 1;
}
if(hours > 23){
hours = 0;
}
document.getElementById('h').value = hours;
document.getElementById('m').value = minutes;
}
var hours = parseInt(prompt('Enter your hours please : '));
var minutes = parseInt(prompt('Enter your minutes please : '));
var btnPassOneMinute = document.getElementById('btn1');
var btnPass_N_Minute = document.getElementById('btn2');
/*if (hours != null) {
main();
}*/
btnPassOneMinute.addEventListener('click', addOneMinute);
btnPass_N_Minute.addEventListener('click', add_N_Minute);
main();
addOneMinute();
add_N_Minute();
function main(){
if(minutes > 59){
minutes = 0;
hours += 1;
}
if(hours > 23){
hours = 0;
}
document.getElementById('h').value = hours;
document.getElementById('m').value = minutes;
}
function addOneMinute(){
main();
minutes += 1;
}
function add_N_Minute(){
//main();
var addMinute = parseInt(prompt('Add your minutes : '));
minutes += addMinute;
if(addMinute > 59){
minutes = 0;
}
if(minutes > 59){
minutes = 0;
hours += 1;
}
if(hours > 23){
hours = 0;
}
document.getElementById('h').value = hours;
document.getElementById('m').value = minutes;
}
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="cours.css">
</head>
<body >
<h1>Exercise 8</h1>
<label>Hours : <input type="text" id='h' /></label>
<label>Minutes : <input type="text" id='m' /></label>
<button id="btn1">Pass 1 minute</button>
<button id="btn2">Add n minutes</button>
<script src="script.js"></script>
</body>
</html>
Thank you...
I have a form for my array of data will print to view with html() and this data each one has child array, I need to get data of those child arrays in my html() as well
Screenshots
my data
how it will look
# Code
HTML
<div class="answerPanel"></div>
<button id="clicks" class="btn btn-primary">Begin</button>
Script
var index = 0;
$("#clicks").click(function(){
// timer function
function timer(seconds, countdownTimer, callback) {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Times Up!";
$("#clicks").attr("disabled", true);
$('.answerPanel').html('<div class="text-center text-danger">OH NO! <br> Times Up!</div>');
} else {
seconds--;
}
//Pass seconds param back to the caller.
callback(seconds);
}
//We pass the countdownTimer param into the timer function as well.
var countdownTimer = null,
seconds = data.quizzes[index].quiz_time;
countdownTimer = setInterval(function() {
timer(seconds, countdownTimer, function(_seconds){
seconds = _seconds;
})
}, 1000);
// printing function
if(typeof data.quizzes[index] != 'undefined'){
var row = `<form>
<div class="row">
<div class="col-md-12">
<div class="pull-left questionTitle">
${data.quizzes[index].question}
</div>
<div class="pull-right" id="countdown"></div>
</div>
<div class="col-md-12">
Choice 1
</div>
<div class="col-md-12">
Choice 2
</div>
<div class="col-md-12">
Choice (etc.)
</div>
</div>
</form>`;
$('.answerPanel').html(row);
index++;
}
if(data.quizzes.length > index+1) {
$("#clicks").html("Next");
}
if(data.quizzes.length === index) {
$("#clicks").html("Finish");
}
//end of printing function
});
Any idea?
Please see my code below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="banner">
<ul id="eventCal">
</ul>
<button id="clicks">Click</button>
<script type="text/javascript">
jQuery(document).ready(function($){
var quizzes = [{title:'title1',choices:[{choice:'choice1'},{choice:'choice2'}]},
{title:'title2',choices:[{choice:'new1'},{choice:'new2'}]},
{title:'title3',choices:[{choice:'demo1'},{choice:'demo2'}]}];
var index = 0;
//console.log(quizzes.length)
$("#clicks").click(function(){
if(typeof quizzes[index] != 'undefined'){
var html = '<li><span>'+quizzes[index].title+'</span></li>';
if(quizzes[index].choices.length > 0){
html+='<li class="choises">';
quizzes[index].choices.forEach((element, index, array) => {
//console.log(element.title);
html+='<ul>';
html+='<li><span>'+element.choice+'</span></li>';
html+='</ul>';
});
html+='</li>';
}
$("#eventCal").html(html);
index++;
}
if(quizzes.length === index)
$("#clicks").html("Finish");
})
});
</script>
</body>
Inside of row, you can get the choices by:
let choices = quizzes[index].choices
i'm a teacher and have just started learning to code for making online quizzes for my students. I'm still very new to programming like JavaScript and php, and I've tried to looked for sources online to help create my quizzes. I have 2 questions:
1). I've set a timer for the quiz but everytime when the time is up, it just keeps counting, what should I put in the
if (parseInt(min) == 0) {
clearTimeout(tim);
location.href = "";
section to redirect my student to the result page or other pages?
(2) My quizzes are mostly fill-in-the-blanks questions and I wonder how to store the point of each question and then show the total score to my students at the end of the quiz? Many thanks!.
Here's my code:
<html>
<head>
<script language ="javascript" >
var tim;
var min = 0;
var sec = 30;
var f = new Date();
function f1() {
f2();
document.getElementById("starttime").innerHTML = "Your started your quiz at " + f.getHours() + ":" + f.getMinutes();
}
function f2() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes ," + sec+" Seconds";
tim = setTimeout("f2()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == 0) {
clearTimeout(tim);
location.href = "www.rawlanguages.com";
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}
}
}
</script>
<title>Quiz</title>
<h1>P.1 Grammar Quiz</h1>
<body>
<div id="ques0" class="ques">
<h2>Question</h2>
<p>She
<input type="text" name="answer0"/> a girl.</p>
</div>
<div id="ques1" class="ques">
<h2>Question</h2>
<p>"is", "am" and "are" are</p>
<ul>
<li>
<input type="radio" name="answer1" value="Present tense" />
<label>Present tense</label>
</li>
<li>
<input type="radio" name="answer1" value="Past tense" />
<label>Past tense</label>
</li>
<li>
<input type="radio" name="answer1" value="Future tense" />
<label>Future tense</label>
</li>
</ul>
</div>
<div id="ques2" class="ques">
<h2>Question</h2>
<p>He
<input type="text" name="answer2"/> a policeman.
</p>
</div>
Check answer!
<script src="JQ.js"></script>
<script src="function.js"></script>
<body onload="f1()" >
<form id="form1" runat="server">
<div>
<table width="100%" align="center">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
<div id="starttime"></div>
<div id="endtime"></div>
<div id="showtime"></div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
</head>
</html>
Your code is good enough for a beginner but it requires some improvements.
<script type="text/javascript" >//language ="javascript" is obsolete
//var tim; //no need at all
//var min = 0; //no need at all
//var sec = 30; //there is better way
//var f = new Date(); //no need to be global
function f1(sec) {//define (declare) sec as parameter
f2(); //call the function
var f = new Date();
document.getElementById("starttime").innerHTML = "Your started your quiz at " + f.getHours() + ":" + f.getMinutes();
var showtime = document.getElementById("showtime"); //used many times
//Here we put (closure) f2
function f2() {
//f2 knows sec from parent scope
if (sec <= 0) {//parseInt(sec) no need. sec is int
showtime.innerHTML = 'Time is over';
//ShowAnswers(); //show on the same page or post to .php
return;
}
sec--;// = parseInt(sec) - 1;
showtime.innerHTML = "Your Left Time is :" + Math.floor(sec / 60) +" Minutes ," + (sec % 60) +" Seconds";
setTimeout(f2, 1000);//"f2()" is correct but this way is better
/* no need in remaining code
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == 0) {
clearTimeout(tim);
location.href = "www.rawlanguages.com";
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}
}
*/
}//f2
}//f1
</script>
<body onload="f1(90)"><!--Here we send seconds to the function -->
Also note that all your quiz starting from <h1>P.1... must be inside body container.
I have a piece of JavaScript that clears out a label (well, it sets its innertext value). The problem is, after I've clicked a button and the page posts back, the label doesn't exist when the Javascript launches. So, I get an error:
0x800a138f - JavaScript runtime error: Unable to set property
'innerText' of undefined or null reference
And the code in the debug window looks like this:
.
.
<body id="PageBody" bgcolor="lightgrey">
<script type = "text/javascript">
/* Stop, Clear and Pause the timer displayed under the pause buttons */
var h1 = document.getElementsByTagName('h1')[0],
start = document.getElementById('start'),
stop = document.getElementById('stop'),
clear = document.getElementById('clear'),
seconds = 0, minutes = 0, hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
document.getElementById('Call_Tab_TabPanelCall_h1').innerText = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);;
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
function stp() {
clearTimeout(t);
}
function clr() {
document.getElementById('Call_Tab_TabPanelCall_h1').innerText = "00:00:00";
seconds = 0; minutes = 0; hours = 0;
}
</script>
<form method="post" action="./MedIntakeMain.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="ctl02_HiddenField" id="ctl02_HiddenField" value="" />
<input type="hidden" name="Call_Tab_ClientState" id="Call_Tab_ClientState" value="{"ActiveTabIndex":0,"TabEnabledState":[true,true],"TabWasLoadedOnceState":[true,false]}" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="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" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZKuxqzo1qNK0jLS5vOjXgYcG0yOhGAUyRMkYR1c88uLjzDmFYO_wTSY6btwoEa6chQ2&t=635803038500000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
stp();clr();timer();//]]>
</
It just stops right at the </, which I guess is where the HTML would start? It's that first line in function clr that gets highlighted. If I comment out the 2 lines in function clr, everything works fine.
These functions are called using this asp on the front end:
<asp:Button ID="CallStart_Btn" runat="server" AccessKey="S" OnClick="CallStart_Btn_Click" Text="SĖ˛tart" Width="112px" OnClientClick="this.disabled=true; stp(); clr(); timer();" UseSubmitBehavior="False" style="margin-left: 0px"/>
And then in the code-behind I've got 3 lines like this:
ScriptManager.RegisterClientScriptBlock(UpdatePanel4, this.GetType(), "stopscript", "stp();", true);
ScriptManager.RegisterClientScriptBlock(UpdatePanel4, this.GetType(), "clearscript", "clr();", true);
ScriptManager.RegisterClientScriptBlock(UpdatePanel4, this.GetType(), "timerscript", "timer();", true);
So, where can I put that JavaScript so it will get called after the label exists?
Use
ScriptManager.RegisterStartupScript
instead of
ScriptManager.RegisterClientScriptBlock
This will put function calls at the bottom of the page.
There are a couple things at play.
You could disable/hide the button until after the label has been created (presuming some user action causes the label to appear, it could also cause the button to enable/appear).
You could add a check to each function to ensure the element exists. Something like:
function clr() {
var label = document.getElementById('Call_Tab_TabPanelCall_h1');
if(label){
label.innerText = "00:00:00";
}
seconds = 0; minutes = 0; hours = 0;
}
I have created a timer using jQuery and javascript. I have appended the timer in a page. Each timer has start, stop and reset button. The problem is that when i click on the second, third, fourth.......... etc timer, only the first timer is working. No other timer is working for me.Below is my code. Can anyone please help me.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
window.onload=function(){document.getElementById('time').innerHTML = "00" + ":" +"00" + ":" + "00";}
</script>
<div class="timers" id="act">
<div id="time"></div>
<div class="timer_controls">
<input class="btnStart" id="start" type="button" value="Start" onclick="timer()" />
<input class="btnreset" id="reset" type="button" value="Reset" onclick="reset()" />
<input class="btnStop" id="stop" type="button" value="Stop" onclick="stopper()" />
</div>
</div>
<input id="appends" type="button" value="append" />
<div class="container"></div>
<style type="text/css">
#time{
font-size:50pt;
}
.container{
float:left;
width:100%;
height:1000px;
}
</style>
<script type="text/javascript">
i = 0;
var w;
function timer() {
if (i > 3599) {
var H = Math.floor(i / 3600);
}
else {
var H = 0;
}
var M = i - (H * 3600)
if (M > 59) {
M = Math.floor(M / 60)
}
else {
M = 0
}
var S = i - (M * 60)
if (S > 3599) {
S = Math.floor(M / 3600)
}
if (H < 10) {
H = "0" + H;
}
if (M < 10) {
M = "0" + M;
}
if (S < 10) {
S = "0" + S;
}
document.getElementById('time').innerHTML = H + ":" + M + ":" + S;
w=setTimeout('timer()', 1000);
i++;
}
function stopper(){
clearTimeout(w);
}
function reset() {
i=0;
document.getElementById('time').innerHTML = "00" + ":" +"00" + ":" + "00";
clearTimeout(w);
}
$("#appends").click(function() {
var index = $('.timers').length;
clearTimeout(w);
var timing=$('.timers').html();
$('.container').append('<div class="timers" id="act_'+(index+1)+'">'+timing+'<input class="btnStart" id="start'+(index+1)+'" type="button" value="Start" onclick="timer()" />'+'</div>');
});
</script>
</body>
</html>
You can have only one uniqe id per HTML element on page. Every time you append new timer they all have similar Id's. So you need to change some logic of your script