We Keep Coding

how can i fix my timer?i don't know why it doesnt work [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm trying to make a timer and i cant make it stop. im using setinterval() and clearinterval() im new using this methods so i dont know if im using them in the rigth way
heres my code:
var estado = "desactivado";
function play() {
if (estado == "desactivado") {
console.log(estado);
estado = "activado";
var mytimer = setInterval(() => {
timer();
}, 1000);
} else if (estado == "activado") {
clearInterval(mytimer);
}
}
function timer() {
let segundos = document.getElementById("segundos");
let minutos = document.getElementById("minutos");
let horas = document.getElementById("horas");
if (segundos.value < 60) {
segundos.value++;
} else {
if (segundos.value == 60) {
if (minutos.value == 60) {
horas.value++;
minutos.value = 00;
segundos.value = 00;
} else {
minutos.value++;
segundos.value = 00;
}
}
}
}

You just defined the mytimer inside the if{} block. So you can't get the value in else block. Maybe you can define the var mytimer on the same level with estato.

How to do the same in JavaScript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have this jQuery that automaticali calculate when is focus out of the field. I need to the the same this in JavaScript and to call the function after each page refresh. Now after each validations my calculation from the fields get lost.
<script language="javascript">
$(function () {
$(document).on("blur", "input[type=text]", function () {
var imekontrolebase = $(this).attr('id');
var ime = ($(this).attr('id')).substr(12, $(this).attr('id').length);
var n = ime.indexOf("_");
var red = ime.substr(n+1);
var imekol1 = "txt_OBR_P_1_1_" + red;
var imekol2 = "txt_OBR_P_1_2_" + red;
var imekol3 = "txtKOL3_" + red;
var txt_OBR_P_1_1 = parseFloat($('#' + imekol1).val().replace(/\,/g, '')) || 0
var txt_OBR_P_1_2 = parseFloat($('#' + imekol2).val().replace(/\,/g, '')) || 0
var txtKOL3 = txt_OBR_P_1_1 + txt_OBR_P_1_2;
if (txtKOL3 === 0 || txtKOL3 === Infinity || isNaN(txtKOL3)) {
txtKOL3 = $('#' + imekol3).val("");
}
else {
var ukupnoID3 = ("" + txtKOL3).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, function ($1) { return $1 + "," });
$('#' + imekol3).val(ukupnoID3);
}
})
})
</script>
I need to create some function like this:
<script language="javascript">
function startCalc() {
}
</script>
And call it from server side after each validation.
Page.ClientScript.RegisterStartupScript(Page.GetType(), "Script", "startCalc()", True)

If you want Vanilla JavaScript solution you can try this:
function startCalc() {
var root = document.documentElement || document.body;
root.addEventListener('blur', function(e) {
var node = e.target;
if (node.nodeName == 'input' &&
node.getAttribute('type') == 'text') {
var imekontrolebase = node.getAttribute('id');
var ime = imekontrolebase.substr(12, imekontrolebase.length);
var n = ime.indexOf("_");
var red = ime.substr(n+1);
var imekol1 = "txt_OBR_P_1_1_" + red;
var imekol2 = "txt_OBR_P_1_2_" + red;
var imekol3 = "txtKOL3_" + red;
var txt_OBR_P_1_1 = parseFloat(document.getElementById(imekol1).value.replace(/\,/g, '')) || 0
var txt_OBR_P_1_2 = parseFloat(document.getElementById(imekol2).value.replace(/\,/g, '')) || 0
var txtKOL3 = txt_OBR_P_1_1 + txt_OBR_P_1_2;
if (txtKOL3 === 0 || txtKOL3 === Infinity || isNaN(txtKOL3)) {
txtKOL3 = document.getElementById(imekol3).value;
}
else {
var ukupnoID3 = ("" + txtKOL3).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, function ($1) { return $1 + "," });
document.getElementById(imekol3).value = ukupnoID3;
}
})
});
}
basically
$('#name') -> document.getElementById('name'); or
document.querySelector('#name') that return single element or
document.querySelectorAll('#name') that return array like object
jqueryObject.val() -> htmlNode.value
$(document).on('blur' -> node.addEventListener('blur' and you need to check for the correct node using event.target

If clauses in for loop acts weird [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a function, which collects inputted answer and checked if collected answer is the same as it is the solution. Questions are asked randomly. Questions and solutions are in separate .txt file.
I have a file with some words and the program always fulfil its condition if the last word from the list is correctly answered, even though if other answers from other questions are correct.
Any suggestions?
var besedeNemske = ["glava", "voda", "drevo"];
var besedePrevod = ["der Kopf", "das Wasser", "der Baum"];
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var lines = this.result.split('\n');
for (var line = 0; line < lines.length; line++) {
if (line % 2 != 0) {
besedeNemske.push(lines[line]);
} else {
besedePrevod.push(lines[line]);
}
}
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
}
var random = 0;
function nastaviRandom() {
random = Math.floor(Math.random() * 5);
}
function noviGlagol() {
nastaviRandom();
document.getElementById("vprasanje").innerHTML = besedePrevod[random];
}
function preveriOdgovor() {
var odgovorjeno = document.getElementById("mojOdgovor").value;
if (besedeNemske.indexOf(odgovorjeno) == random) {
document.getElementById("odgovor").innerHTML = "Pravilni odgovor";
} else {
document.getElementById("odgovor").innerHTML = "Napačen odgovor. Pravilni odgovor je " + (besedeNemske[random]) + "";
}
}
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="page-wrapper">
<h1>Nemščina glagoli</h1>
<div>
Select a text file:
<input type="file" id="fileInput">
</div>
<pre id="fileDisplayArea"><pre>
<button onclick="noviGlagol()">Novi glagol</button>
<div id="vprasanje"></div>
<div id="odgovor"></div>
<input type="text" id="mojOdgovor">
<button onclick="preveriOdgovor()">Pošlji</button>
</div>
<script>
</script>
</body>
<html>

To submit the comments on the original question as an answer:
var index = 0;
for (var i = 0; i < besedeNemske.length; i++) {
if (odgovorjeno == besedeNemske[i]) {
index = i;
break;
}
}
index will be 0 for both of these cases:
if odgovorjeno == besedeNemske[0]
if odgovorjeno is not an element in the array besedeNemske
This is a really good use case for refactoring your code to use included language functionality or libraries, as it not only shortens your code, but is usually more correct (or at least their bugs are known/understood).
As Baramar pointed out, you can change your solution to:
function preveriOdgovor() {
var odgovorjeno = document.getElementById("mojOdgovor").value;
if (besedeNemske.indexOf(odgovorjeno) == random) {
document.getElementById("odgovor").innerHTML = "Pravilni odgovor";
} else {
document.getElementById("odgovor").innerHTML = "Napačen odgovor. Pravilni odgovor je " + (besedeNemske[random]) + "";
}
}

How to use localStorage on this example? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Can you apply localStorage on this? If I click "Deduct", the id "slot" will reduce to 1. What I want to learn is how to apply localStorage. If the slot is 9, and if I will refresh/close the browser or restart the computer and run the program again, the slot will remain 9. I'm having a hard time on learning about localStorage, need help masters.
<script>
var availableSlot1 = 10;
var reduceSlot1 = function(valueToDeduct1){
availableSlot1 = availableSlot1 - valueToDeduct1;
document.getElementById('slot').innerHTML = availableSlot1;
var x = storage.key(availableSlot1);
if (availableSlot1 == 0){
document.getElementById('x').innerHTML = "FULL";
document.getElementById("button1").style.display = "none";
}
};
</script>
<p id="slot">10</p>
Deduct
EDITED:
<script>
var slot = localStorage.getItem("slot");
if (typeof slot == "undefined") {
slot = 10;
}
document.getElementById("slot").innerHTML = slot;
var reduceSlot1 = function reduceSlot(by)
{
if (slot >= by) {
slot -= by;
document.getElementById("slot").innerHTML = slot;
localStorage.setItem("slot", slot);
}
else {
document.getElementById('slot').innerHTML = "FULL";
document.getElementById("button1").style.display = "none";
}
}
</script>
I followed the code but, it is not working.

Live Demo of Local Storage
you can use local storage using localStorage.name, in place of name you can use any property.
var i = 1;
localStorage.name = i;

http://jsfiddle.net/flocsy/mrhwK/
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
document.getElementById("slot").innerText = slot;
function reduceSlot() {
if (slot >= 1) {
slot --;
document.getElementById("slot").innerText = slot;
localStorage.setItem("slot", slot);
} else {
document.getElementById('x').innerText = "FULL";
document.getElementById("button1").style.display = "none";
}
}
document.getElementById("button1").onclick = reduceSlot;

Javascript better way to code this animation [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I first off all tried passing around the value of y back on the function but this caused the browser to slow as if an infinite loop had been created, the external frame variable stops this but I'd prefer to keep all the variables inside functions, is there a way I can achieve this without getting 'feedback'?
var frame=0;
function launch(){
var el=document.getElementById("selection");
setInterval(function(){ drawer(el,frame);},300);
}
function drawer(el,y){
if(y<20){
frame++;
el.style.top=20+frame+"px";
setInterval(function(){ drawer(el,frame);},300);
}

Use a closure, you also want to be using setTimeout or alternatively killing the interval when it's done:
function launch(){
var animator = function(el) {
var frame = 0;
var _this = {
draw : function() {
frame += 1;
el.style.top=20+frame+"px";
if(frame < 20) {
setTimeout(_this.draw, 300);
}
}
}
return _this;
}(document.getElementById("selection"));
setTimeout(animator.draw, 300);
}

Here's the updated code. You only have to create an interval once. Store it in a variable and clear it when the maximum is reached.
var frame = 0;
var running = null;
var max = 20;
var e = document.getElementById("selection");
function drawer() {
++frame
e.style.top = 20 + frame + "px";
if (frame == max) {
clearInterval(running);
running = null;
}
}
running = setInterval(drawer, 300);
Demo
Try before buy
Edit
As you said in your question you want to keep all variables inside the function, you can use this:
function drawer(e, frame) {
if ('undefined' == typeof e) {
var e = document.getElementById("selection");
}
if ('undefined' == typeof frame) {
var frame = 0;
}
++frame
e.style.top = 20 + frame + "px";
if (frame <= 20) {
setTimeout(function() { drawer(e, frame); }, 300);
}
}
drawer();
Demo
Try before buy

Here are few advices for you to improve your coding style:
Try to make a meaningful functions
Try to parametize numbers with meaningful and clear names
Write clean codes
Let me give you my version of what I understand you are trying to do.
As you can see, it is more clean and easy to read/understand for others.
I included a live demo at the bottom for you to fiddle with.
function launch() {
var el = document.getElementById('selection'),
maxY = 300,
stepY = 20,
interval = 100;
animateY(el, maxY, stepY, interval);
}
function moveToY(el, y) {
el.style.top = y + "px";
}
function animateY(el, maxY, stepY, interval) {
var y = 0;
var id = setInterval(function () {
if (y < maxY) {
y += stepY;
moveToY(el, y);
}
else {
clearInterval(id);
}
}, interval);
}
Here's a live demo: http://jsfiddle.net/A53sy/2/