I am creating one program of the elevator which includes up, down buttons (external functions) and buttons (0 to 5:: internal functions) inside the elevator my external functions are working correctly but when inside elevator user press any button elevator should go to that place. and update the position of user and elevator. But when I press the button(0,1,2,3,4,5) it doesn't work. Can anyone help me to solve the issue. Thanks in advance.
code::
<!DOCTYPE html>
<html lang="en">
<head>
<title>elevator</title>
</head>
<body>
<h2>Internal Functions</h2>
<span>current user position :: </span>
<p id="userPosition"></p>
<span>current elevator position :: </span>
<p id="elevatorPostion"></p>
<button id="btn" onclick="inFunction(0)" value="0">0</button>
<button id="btn" onclick="inFunction(1)" value="1">1</button>
<button id="btn" onclick="inFunction(2)" value="2">2</button>
<button id="btn" onclick="inFunction(3)" value="3">3</button>
<button id="btn" onclick="inFunction(4)" value="4">4</button>
<button id="btn" onclick="inFunction(5)" value="5">5</button>
<h2>External Functions</h2>
user position:
<input type="text" id="userText" name="UserPosition" value="0">
<button onclick="exFunction('up')">UP</button>
<button onclick="exFunction('down')">DOWN</button>
<script>
var userPosition = 0,
elevatorPosition = 4
function exFunction(pressedValue) {
console.log(pressedValue);
var userPosition = document.getElementById("userText").value;
document.getElementById("userPosition").innerHTML = userPosition;
document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
var intervalEle = setInterval(function () {
if (userPosition > elevatorPosition) {
console.log('Elevator position', elevatorPosition);
elevatorPosition++;
} else if (userPosition < elevatorPosition) {
elevatorPosition--;
} else {
elevatorPosition == userPosition;
clearInterval(intervalEle);
}
document.getElementById("userPosition").innerHTML = userPosition;
document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
}, 1000);
}
function inFunction(clickedValue) {
var btnValue = document.querySelector('btn').value;
document.getElementById("userPosition").innerHTML = userPosition;
document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
console.log(btnValue);
var intervalEle2 = setInterval(function () {
if (elevatorPosition > btnValue) {
elevatorPosition--
} else if (elevatorPosition < btnValue) {
elevatorPosition++
} else {
elevatorPosition == btnValue;
clearInterval(intervalEle2)
}
document.getElementById("userPosition").innerHTML = userPosition;
document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
}, 1000)
}
</script>
</body>
</html>
output :
https://i.stack.imgur.com/tKeeL.png
var btnValue = document.querySelector('btn').value;
There are no <btn> elements on your page, so document.querySelector('btn') returns null. You've illegally reused "btn" as an id, so document.getElementById('btn') won't do what you expect either.
You've already got the number of the button that was clicked; you passed it in to inFunction as clickedValue. Just use that.
Related
I have JavaScript to show/hide div on click. Inside that div are more buttons to show/hide PNGs.
I want the clicked button to have a bottom border line until another button in that div is clicked.
I have achieved this but each time I click on a button in the shown div the bottom border line stays on the button when I click the next button.
I've spent hours trying to fix this. please help
let wildCard = document.querySelectorAll(".element-select-container button");
for (let button of wildCard) {
button.addEventListener('click', (e) => {
const et = e.target;
const active = document.querySelector(".active");
let redline = (".redline");
if (active) {
active.classList.remove("redline");
active.classList.remove("active");
}
et.classList.add("active");
et.classList.add("redline");
let allContent = document.querySelectorAll('.button-wrapper');
for (let content of allContent) {
if(content.getAttribute('data-e') === button.getAttribute('data-e')) {
content.style.display = "block";
}
else {
content.style.display = "none";
}
}
});
}
HTML
<div class="element-select-container">
<button id="but81" class="but81 redline" data-e="81" type="button" name="">Doors</button>
<button id="but82" class="but82" data-e="82" type="button" name="">Windows</button>
<button id="but83" class="but83" data-e="83" type="button" name="">Facia</button>
<button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button>
<button id="but85" class="but85" data-e="85" type="button" name="">Garage</button>
<button id="but86" class="but86" data-e="86" type="button" name="">Steps</button>
</div>
CSS
.redline {
border-bottom: 2px solid red;
}
The issue is, on first load, the first button is redline but not active - so, when you press a different button, the code to remove redline from active doesn't find active so redline isn't removed
simple fix
const active = document.querySelector(".active,.redline");
As follows
let wildCard = document.querySelectorAll(".element-select-container button");
for (let button of wildCard) {
button.addEventListener('click', (e) => {
const et = e.target;
const active = document.querySelector(".active,.redline");
if (active) {
active.classList.remove("redline");
active.classList.remove("active");
}
et.classList.add("active");
et.classList.add("redline");
let allContent = document.querySelectorAll('.button-wrapper');
for (let content of allContent) {
if(content.getAttribute('data-e') === button.getAttribute('data-e')) {
content.style.display = "block";
}
else {
content.style.display = "none";
}
}
});
}
.redline {
border-bottom: 2px solid red;
}
<div class="element-select-container">
<button id="but81" class="but81 redline" data-e="81" type="button" name="">Doors</button>
<button id="but82" class="but82" data-e="82" type="button" name="">Windows</button>
<button id="but83" class="but83" data-e="83" type="button" name="">Facia</button>
<button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button>
<button id="but85" class="but85" data-e="85" type="button" name="">Garage</button>
<button id="but86" class="but86" data-e="86" type="button" name="">Steps</button>
</div>
how can I hide the text opened while clicking on a button by clicking on the same button ? In other words, the same button should show or hide a text when you click on it.
Here's my code that shows a text :
<h3>
<button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
<p id="infos"></p>
<script>
function myFunction() {
document.getElementById("infos").innerHTML = "blablabla";
}
</script>
</h3>
Define a variable to save the button state
var clicked = 0;
function myFunction() {
if(clicked == 0 ) {
document.getElementById("infos").innerHTML = "blablabla";
clicked = 1;
} else {
document.getElementById("infos").innerHTML = "";
clicked = 0;
}
}
<h3>
<button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
<p id="infos"></p>
</h3>
Try this out, it worked for me:
function showHide() {
var demo = document.getElementById('demo');
if (demo.innerHTML === "") {
demo.innerHTML = "bla";
} else {
demo.innerHTML = "";
}
}
<p id="demo"></p>
<button onclick="showHide()">Show Hide</button>
Quite simple, using jQuery—
$( "#button" ).click(function() {
$('#text-to-toggle').toggle(200);
});
I am calling a addtext() function from html onclick() that is nested inside add() function. I want to call the second function. How can i approach this?
Here i have a link with add() function that shows a textbox and an ADD button with addtext().
The add() function checks for text and if text is present, it generates a new text box.
Now i want the add button to take that text and from the textbox and set it in replacement of the textbox.
clicking the ADD button will take it to addtext() which is inside the add() function.
Html code:
<a id = "newcard" href="#" onclick="add()" >
<b style ="color: #444444">Add Card...</b>
</a>
<div>
<span id = "show-ta"><textarea id="txtarea" style ="
display:none"></textarea><span>
<span id = "newbutton"><button id = "firstbutton" class ="btn btn-
success nbutton"onclick="addtext()" style ="display:none">Add</button>
</span>
</div>
Jquery code:
function add(){
var newTextBoxDiv = $(document.createElement('textarea'));
if ( $('#txtarea').css('display') == 'none' ){
$('#txtarea').css('display', 'block');
}
if ( $('#firstbutton').css('display') == 'none' ){
$('#firstbutton').css('display', 'block');
}
var wrapper = $('#show-ta');
var button = $(document.createElement('button'));
if(wrapper.find('textarea').last().val().length) {
var x =wrapper.find('textarea').last().val();
function addtext()
{
}
wrapper.append('<textarea class="t-one"></textarea>');
wrapper.append('<button class ="btn btn-success
nbutton">Add</button>').appendTo('#cardarea').insertAfter('#cardtitle');;
//button.addClass("btn btn-success");
wrapper.appendTo("#cardarea").insertAfter('#cardtitle');
wrapper.addClass('t-one');
// var text =$('textarea:nth-last-child(2)').val().length;
//wrapper.addClass('nbutton');
}
You have to assign the nested function to a property like this addText.add = add; then you can call that function in onClick event.
function addText()
{
// irrelevant code here
function add(arg){
console.log( arg );
}
addText.add = add;
}
addText();
<button onclick="addText.add('Nested function')">Click me</button>
EDIT:
Updated the snippet as per your code
function add() {
var newTextBoxDiv = $(document.createElement('textarea'));
if ($('#txtarea').css('display') == 'none') {
$('#txtarea').css('display', 'block');
}
if ($('#firstbutton').css('display') == 'none') {
$('#firstbutton').css('display', 'block');
}
var wrapper = $('#show-ta');
var button = $(document.createElement('button'));
if (wrapper.find('textarea').last().val().length) {
var x = wrapper.find('textarea').last().val();
function addtext() {
alert('working');
}
add.addtext = addtext;
wrapper.append('<textarea class="t-one"></textarea>');
wrapper.append('<button class="btn btn-success nbutton ">Add</button>').appendTo('#cardarea').insertAfter('#cardtitle');;
wrapper.appendTo("#cardarea").insertAfter('#cardtitle');
wrapper.addClass('t-one');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a id="newcard" href="#" onclick="add()">
<b style="color: #444444">Add Card...</b>
</a>
<div>
<span id="show-ta">
<textarea id="txtarea" style ="display:none">
</textarea>
</span>
<span id="newbutton">
<button id = "firstbutton" class ="btn btn-success nbutton" onclick="add.addtext()" style="display:none">Add
</button>
</span>
</div>
I am trying to make a countdown timer based on the Pomodoro technique where you work for 25 minutes then take a break. I am writing the page in Javascript and jQuery using the jQuery.countdown and moment.js plugins. I have it so that when a user hits the start button it counts down 25 minutes but then after that timer is finished I want there to have two break options restart the timer again. Then it just goes in a cycle 25mins->break->25 mins->break->etc depending on what button the user pushes at the end of countdown.
How it is now the buttons after the countdown is complete do nothing. I feel like I need to reset the timer but the documentation is a little difficult to through for jQuery.countdown.
<div class="container-fluid">
<p>start timer and then get to work</p>
<div class="container-fluid">
<div class="container-fluid">
<span id="timer"></span>
</div>
</br>
<div class="containter-fluid" id="timer-buttons">
<span><button type="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>
</div>
</div>
<script type="text/javascript">
var $timer = $('#timer');
var $timerButtons = $('#timer-buttons');
$('#btn-start-timer').click(function(event) {
// get the current time when button clicked
var currentTime = moment();
// add 25 minutes for interval
var timerInterval = moment(currentTime).add(25.0, 'm');
// format interval
var timerIntervalFormatted = moment(timerInterval).format('YYYY/MM/DD HH:mm:ss');
// start the 25 minute timer and at the end popup two buttons for breaks
$timer.countdown(timerIntervalFormatted, function(event) {
$(this).html(event.strftime('%M:%S'));
}).on('finish.countdown', function() {
$timerButtons.html('<span><button type="button" class="btn btn-secondary btn-sm" id="btn-short-break">short break</button></span> <span><button type="button" class="btn btn-secondary btn-sm" id="btn-long-break">long break</button></span>');
});
});
$('#btn-short-break').click(function(event) {
var currentTime = moment();
var shortBreak = moment(currentTime).add(1.0, 'm');
var shortBreakFormatted = moment(shortBreak).format('YYYY/MM/DD HH:mm:ss');
$timer.countdown(shortBreakFormatted, function(event) {
$(this).html(event.strftime('%-M:%S'));
}).on('finish.countdown', function() {
$timerButtons.html('<span><button type ="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>');
});
});
$('#btn-long-break').click(function(event) {
var currentTime = moment();
var longBreak = moment(currentTime).add(2.0, 'm');
var longBreakFormatted = moment(longBreak).format('YYYY/MM/DD HH:mm:ss');
$timer.countdown(longBreakFormatted, function(event) {
$(this).html(event.strftime('%-M:%S'));
}).on('finish.countdown', function() {
$timerButtons.html('<span><button type ="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>');
});
});
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>countdown</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.plugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.css" />
<style type="text/css">
#timer-buttons #btn-short-break, #timer-buttons #btn-long-break, #timer-buttons.break #btn-start-timer
{
display: none;
}
#timer-buttons.break #btn-short-break, #timer-buttons.break #btn-long-break
{
display: inline;
}
</style>
<script type="text/javascript">
$(function () {
var $timer = $('#timer');
var $timerButtons = $('#timer-buttons');
$('#btn-start-timer').click(function (event) {
// get the current time when button clicked
var currentTime = moment();
// add 25 minutes for interval
var timerInterval = moment(currentTime).add(25, 's');
// format interval
var timerIntervalFormatted = moment(timerInterval).format('YYYY/MM/DD HH:mm:ss');
// start the 25 minute timer and at the end popup two buttons for breaks
$timer.removeClass('is-countdown').html('').countdown({
until: timerInterval._d,
onExpiry: function () {
$timerButtons.toggleClass('break');
}
});
});
$('#btn-short-break').click(function (event) {
var currentTime = moment();
var shortBreak = moment(currentTime).add(1, 's');
var shortBreakFormatted = moment(shortBreak).format('YYYY/MM/DD HH:mm:ss');
$timer.removeClass('is-countdown').html('').countdown({
until: shortBreak._d,
onExpiry: function () {
$timerButtons.toggleClass('break');
}
});
});
$('#btn-long-break').click(function (event) {
var currentTime = moment();
var longBreak = moment(currentTime).add(2, 's');
var longBreakFormatted = moment(longBreak).format('YYYY/MM/DD HH:mm:ss');
$timer.removeClass('is-countdown').html('').countdown({
until: longBreak._d,
onExpiry: function () {
$timerButtons.toggleClass('break');
}
});
});
});
</script>
</head>
<body>
<div class="container-fluid">
<p>start timer and then get to work</p>
<div class="container-fluid">
<div class="container-fluid">
<div id="timer"></div>
</div>
<br />
<div class="containter-fluid" id="timer-buttons">
<span><button type="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>
<span><button type="button" class="btn btn-secondary btn-sm" id="btn-short-break">short break</button></span>
<span><button type="button" class="btn btn-secondary btn-sm" id="btn-long-break">long break</button></span>
</div>
</div>
</div>
</body>
</html>
use id="checkout-countdown" for html tag
For jquery:
<script src="~/Assets/global/plugins/countdown/jquery.countdown.js"></script>
<script>
$(function () {
startCountDown();
});
function startCountDown() {
var currentDateTime=new Date($.now());
var austDay = new Date(currentDateTime);
austDay.setSeconds(austDay.getSeconds() + #expirationSecondsRemaining);
$('#checkout-countdown').removeClass('is-countdown').html('');
$('#checkout-countdown').countdown({
until: austDay, compact: true,
description: '', onExpiry: liftOff, 'format': 'MS', alwaysExpire: true
});
}
function liftOff() {
var result = new Object();
result.message = "Your session has expired. We've released your selected price. Please try selecting price again.";
result.type = "info";
app.showConfirmation(result);
//recursively call start count down
startCountDown();
}
</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>