We Keep Coding

pass value from span tag to input tag

I have a counter in span tags, when I press Start the timer starts counting and when pressing Pause it is stopped. Now the question is, How do I pass the value from the counter to input tag when Pause clicked?
<span id="min">00</span>:<span id="sec">00</span>
<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">
Script
<script>
const Clock = {
totalSeconds: 0,
start: function () {
if (!this.interval) {
const self = this;
function pad(val) {
return val > 9 ? val : "0" + val;
}
this.interval = setInterval(function () {
self.totalSeconds += 1;
document.getElementById("min").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60));
document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60));
}, 1000);
}
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
};
document.getElementById("startButton").addEventListener("click", function () { Clock.start(); });
document.getElementById("pauseButton").addEventListener("click", function () { Clock.pause(); });
</script>
Here it is as a runnable snippet:
const Clock = {
totalSeconds: 0,
start: function() {
if (!this.interval) {
const self = this;
function pad(val) {
return val > 9 ? val : "0" + val;
}
this.interval = setInterval(function() {
self.totalSeconds += 1;
document.getElementById("min").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60));
document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60));
}, 1000);
}
},
pause: function() {
clearInterval(this.interval);
delete this.interval;
},
};
document.getElementById("startButton").addEventListener("click", function() {
Clock.start();
});
document.getElementById("pauseButton").addEventListener("click", function() {
Clock.pause();
});
<span id="min">00</span>:<span id="sec">00</span>
<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">

I adjustment your script with template string javascript created with a variable time and improvement your double tags for a tag with id "time-span" and "time-input" both with return variable time
Also in Clock inserted pad function property and acess inside start with self variable
See this code and working
Update
Improvement with new input time last show time after pause.
const Clock = {
totalSeconds: 0,
time: null,
pad: function (val) {
return val > 9 ? val : "0" + val;
},
start: function () {
const self = this;
if (!self.interval) {
self.interval = setInterval(function () {
self.totalSeconds += 1;
let min = self.pad(Math.floor(self.totalSeconds / 60 % 60));
let sec = self.pad(parseInt(self.totalSeconds % 60));
self.time = `${min}:${sec}`;
document.getElementById("time-span").innerHTML = self.time;
document.getElementById("time-input").value = self.time;
}, 1000);
}
},
createInputResult: function () {
const self = this;
let input = document.createElement('input');
let line = document.createElement('hr');
input.id = 'time-result';
input.type = 'text';
input.value = self.time;
document.getElementById("pauseButton").insertAdjacentElement('afterend', input);
document.getElementById("pauseButton").insertAdjacentElement('afterend', line);
},
pause: function () {
const self = this;
clearInterval(self.interval);
delete self.interval;
self.createInputResult();
},
};
document.getElementById("startButton").addEventListener("click", () => Clock.start() );
document.getElementById("pauseButton").addEventListener("click", () => Clock.pause() );
<!-- Times -->
<span id="time-span">00:00</span>
<input id="time-input" type="text" value="00:00">
<!-- Controls -->
<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">

const Clock = {
totalSeconds: 0,
start: function() {
if (!this.interval) {
const self = this;
function pad(val) {
return val > 9 ? val : "0" + val;
}
this.interval = setInterval(function() {
self.totalSeconds += 1;
document.getElementById("min").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60));
document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60));
}, 1000);
}
},
pause: function() {
clearInterval(this.interval);
var text = document.getElementById('sec').innerHTML
document.getElementById('startButton').value=text;
delete this.interval;
},
};
document.getElementById("startButton").addEventListener("click", function() {
Clock.start();
});
document.getElementById("pauseButton").addEventListener("click", function() {
Clock.pause();
});
<span id="min">00</span>:<span id="sec">00</span>
<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">

How to do this in jQuery?

I want to transform this code from JavaScript into jQuery.
This is the current code:
var i = 0;
var start = true;
document.getElementById("startclick").addEventListener("click", function() {
if (start) {
start = false;
interval = setInterval(function() {
i++;
document.getElementById('list').innerHTML += "albastru_" + i + '<br>' ;
}, 3000);
} else {
start = true;
clearInterval(interval);
}
});
Here is my attempt:
$x = 0;
$start = true;
$(document).ready(function () {
$('#buton2').on('click',function () {
if($start){
$start = false;
$interval = setInterval(function () {
$x ++;
$('#list').html('<p>albastru_</p>' + $x + '<br>'); }, 1000);
} else {
$start = true;
clearInterval($interval);
}
})
});

You can do something like below. I'm assuming startclick is a button, after you click it .append() will add the required data to #list div after 3 seconds.
Updated Answer with start and stop buttons.
var i = 0;
var start = true;
var interval = null;
$('#startclick').click(function() {
if (interval !== null) return;
interval = setInterval(function() {
i++;
$('#list').append("albastru_" + i + '<br>');
}, 3000);
});
$("#stop").click(function() {
clearInterval(interval);
interval = null;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="list">
</div>
<br />
<button id="startclick">START!</button>
<button id="stop">STOP!</button>

The stop button for my pomdoro clock does not function

I am building a pomodoro clock with start and stop button. I have the start button functioning, but not the stop button. Here is my code:
HTML:
<h1> Pomodoro Clock</h1>
<!--Place holder for timer-->
<div id="timer" class="circle">Timer</div>
<!--//Start Button-->
<button onclick="setTimeout(timer, 1000);">Start</button>
<!--Stop Button-->
<button onclick="timer.stopTimer()">Stop</button>
JS:
var i = 1500;
var timeHandler;
document.getElementById("timer").innerHTML = i;
function timer() {
timeHandler = setInterval(function() {
if (i > 0) {
i--;
document.getElementById("timer").innerHTML = i;
}
}, 1000);
function stopTimer() {
clearTimeout(timeHandler);
}
}
I would prefer a vanilla JS solution.

Try this:
HTML
<!--Stop Button-->
<button onclick="stopTimer()">Stop</button>
JS
var i = 1500;
var timeHandler;
document.getElementById("timer").innerHTML = i;
function timer() {
timeHandler = setInterval(function() {
if (i > 0) {
i--;
document.getElementById("timer").innerHTML = i;
}
}, 1000);
}
function stopTimer() {
clearTimeout(timeHandler);
}

The javascript for the time increases it's speed on the second loop

Help me debug this code. The button should open a link onclick and the visit button on the main page will be disabled and it's value will become a timer. There's no problem on first click, but when the timer runs out and I click the button again, the speed of the clock increases. Please help me.
<html>
<head>
<script type = "text/javascript">
var t;
var isTimeron = false;
var counter = 0;
function disableButt()
{
document.getElementById("but1").disabled = true;
}
function enableVisit()
{
document.getElementById("but1").disabled = false;
}
function stopMe()
{
isTimeron = false;
clearTimeout(t);
}
function countdown()
{
document.getElementById("but1").value = counter;
counter--;
if (counter <= -1)
{
stopMe();
document.getElementById("but1").value = "VISIT";
document.getElementById("but1").disabled = false;
enableVisit();
}
t = setTimeout("countdown();", 1000);
}
function startMe() {
if (!isTimeron)
{
counter = 10;
isTimeron = true;
countdown();
}
}
</script>
<body>
<a href='' target = '_blank'><input type = "button" id = "but1" value = "VISIT" style="background:#83FF59; font-weight:bold;"
onclick = "startMe(); disableButt();"/></a>
</body>
</html>

You are not stopping the first timer.
function countdown()
{
document.getElementById("but1").value = counter;
counter--;
if (counter <= -1)
{
stopMe();
document.getElementById("but1").value = "VISIT";
document.getElementById("but1").disabled = false;
enableVisit();
}
t = setTimeout("countdown();", 1000);
}
The counter goes under zero, you call stopMe() by you still call setTimeout. You have two timer going on now.
Just change it to
function countdown()
{
document.getElementById("but1").value = counter;
counter--;
if (counter <= -1)
{
stopMe();
document.getElementById("but1").value = "VISIT";
document.getElementById("but1").disabled = false;
enableVisit();
return;
}
t = setTimeout("countdown();", 1000);
}
Small suggestion avoid strings in setTimeout.
setTimout(countdown, 1000);
is better

Show Div on Mouseover after three second

I want on first click it will show after 3 seconds but after the first click when I clicked it will shown before 3 seconds:
function Func1()
{
document.getElementById('div1').style.visibility = "visible" ;
}
function Func1Delay()
{
setTimeout("Func1()", 3000);
}
function Func2Delay()
{
document.getElementById('div1').style.visibility = "hidden" ;
}

Your English or description is very poor, but from what I understand, you want something like this :
var div = document.getElementById('div1'),t;
function changeStyle(element,prop,value){
element.style[prop] = value;
}
function showDiv(){
changeStyle(div,'opacity','1');
}
function hideDiv(){
changeStyle(div,'opacity','0');
}
div.addEventListener('mouseover',function(){
t = setTimeout(showDiv,3000);
},false);
div.addEventListener('mouseout',function(){
clearTimeout(t);
hideDiv();
},false);​
Here's a demo : http://jsfiddle.net/gion_13/TSVA5/
You have to hover the "invisible" div and it will show after 3 seconds.

this works for me
the markup:
<input type="button" value="clickme" onmouseout="ClearIntv()" onmouseover="DelayShow('showMe',5000)" />
<div id="showMe" style="display:none;background-color:red;width:50px;height:50px;">
</div>
the script:
var intv;
function DelayShow(timeOutMs) {
var elm = document.getElementById("showMe");
var now = new Date().getTime();
var end = now + timeOutMs;;
intv = setInterval(function () {
now = new Date().getTime();
if (now >= end) {
elm.style.display = "block";
clearInterval(intv);
}
}, 500);
}
function ClearIntv() {
clearInterval(intv);
}
Activates the counter on MouseOver, and cancels on MouseOut