Multiply a variable and store that value/output to screen - javascript

I have tried a bunch of ways to get this to work. I'm not a coder, and I have a frankensteined abomination of a counter program I put together as a replacement for our expensive counters that kept breaking on us (basically you input a value at the start of the day, and based on that value a calculation is done for the GOAL for the day).
I now want to add a GOAL BY LUNCH field/display that - however simply doing something like
var lunchgoal = goal * 0.69;
And then putting it on the page like I have with the goal field, does not seem to work.
I can either get it to display 0 - which seems like its displaying just the basic 0 value of goal before it is being incremented, or NaN - not a number.
So I thought I need to convert it to a number before multiplying it, but I nothing has worked for me for that. Right now I'm guessing it may be a matter of where they are contained on the page? I find that part of this confusing honestly. Any help is much appreciated, I would have thought this would be fairly simple!
Thank you!
HTML
<html>
<style>
body {background-color: Black;}
p {color: white;}
</style>
<div class="container">
<p> SAMS VALUE: <span id="output"> </span>
</p>
<p style="font-size:110px"> GOAL: <span id="output2"> </span>
</p>
<button style="background-color:white;width:20%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
<p style="font-size:110px">Actual Count: <span id="clicks">0</span>
</p>
<div class="row">
<div class="col-sm-4"/>
<div class="col-sm-4">
<div id="timeContainer" class="well well-sm">
<time id="timerValue"/>
</div>
<div id="timerButtons">
<button id="start" class="btn btn-success" disabled="disabled">START</button>
<button id="stop" class="btn btn-danger">STOP</button>
<button id="reset" class="btn btn-default">RESET</button>
</div>
<div class="col-sm-4 col-sm-4 col-md-4"/>
</div>
</div>
</div>
</html>
Script
<script type="text/javascript">
document.addEventListener("keyup", function(event) {
if (event.keyCode === 109) {
event.preventDefault();
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode === 107) {
event.preventDefault();
document.getElementById("stop").click();
}
});
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
}
}, SAMSINPUT * 1000);
var timerDiv = document.getElementById('timerValue'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
reset = document.getElementById('reset'),
clear = false,
t;
</script>

You have to do it in loop where goal is changing & you want this to change as well.otherwise it just stays on 0. i shortened the timer for demo purpose
document.addEventListener("keyup", function(event) {
if (event.keyCode === 109) {
event.preventDefault();
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode === 107) {
event.preventDefault();
document.getElementById("stop").click();
}
});
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
// console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
var lunchGoalNumber = goal * 0.69;
var output3 = document.getElementById("output3")
output3.innerHTML = lunchGoalNumber;
}
}, SAMSINPUT * 25);
var timerDiv = document.getElementById('timerValue'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
reset = document.getElementById('reset'),
clear = false;
<div class="container">
<p> SAMS VALUE: <span id="output"> </span></p>
<p style="font-size:50px"> GOAL: <span id="output2"> </span></p>
<p style="font-size:50px"> Lunch/GOAL: <span id="output3"> </span></p>
<button style="background-color:white;width:35%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
<p style="font-size:50px">Actual Count: <span id="clicks">0</span></p>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div id="timeContainer" class="well well-sm">
<time id="timerValue"></time>
</div>
<div id="timerButtons">
<button id="start" class="btn btn-success" disabled="disabled">START</button>
<button id="stop" class="btn btn-danger">STOP</button>
<button id="reset" class="btn btn-default">RESET</button>
</div>
<div class="col-sm-4 col-sm-4 col-md-4"></div>
</div>
</div>
</div>
</body>

Related

Javascript misses some clicks

Hi I'm new to javascript, and trying to make a basic calculator
I started with the add button
When I run the code sometimes I have to click on the btn-add button twice or 3 times to display the result and the calculations when the number of digits of the input is greater than the previous result
Any ideas?
const addBtn = document.querySelector('#btn-add')
const userInput = document.querySelector('#input-number')
const currentResultOutput = document.querySelector('#current-result')
const currentCalculationOutput = document.querySelector('#current-calculation')
let currentResult = 0
let currentDescription
addBtn.addEventListener('click', addFn)
function addFn() {
currentDescription = ` ${currentResult} + ${userInput.value} `
currentResult += Number(userInput.value)
outputResult(currentResult, currentDescription)
}
function outputResult(result, text) {
currentResultOutput.innerHTML = result
currentCalculationOutput.innerHTML = text
}
<section id="calculator">
<input type="number" id="input-number" st />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
it's an issue with the laptop mouse lmaoo, sorry guys
please replace this one
function addFn() {
currentDescription = ` ${currentResult} + ${userInput.value} `
currentResult += ParseInt(userInput.value)
outputResult(currentResult, currentDescription)
}
with this code
function addFn() {
currentDescription = ` ${currentResult} + ${userInput.value} `
currentResult += parseInt(userInput.value)
outputResult(currentResult, currentDescription)
}

Gusser Game not reloading the page, after GameOver

I am new to javascript and I was trying to build a small guesser game app; however, every thing is Ok except for reloading the page after the game is over, the page is not reloading when clicking 'Play Again' and the button end up just disabled.
Please help me with this issue, I can not figure it out on my own.
let min = 1, max = 10, winnerNum = RandNum(max,min), gussNum = 3;
// UI vars
let game = document.querySelector('#game'),
minNum = document.querySelector('.min-num'),
maxNum = document.querySelector('.max-num'),
gussBtn = document.querySelector('#gussBtn'),
gussInput = document.querySelector('#input'),
message = document.querySelector('.msg');
// assign min and max
minNum.textContent = min;
maxNum.textContent = max;
// reload the game
game.addEventListener('mousedown', function(e){
if(e.target.className ==='play-again'){
window.location.reload();
// Why is the page is not reloaded ??
}
});
// listent to the gussed number
gussBtn.addEventListener('click', function(){
let guss = parseInt(gussInput.value);
console.log(guss);
//validate
if(guss===winnerNum){
gameOver(true,`Winner Winner Chicken Dinner, Yes ${winnerNum} is the correct number`)
} else{
gussNum -= 1;
if(gussNum===0){
gameOver(false,`You lost game over, the correct number is ${winnerNum}`)
} else if(gussNum<0){
gussBtn.disabled=true;
gussInput.disabled=true;
} else {
gussInput.disabled=true;
gussInput.style.borderColor = 'red';
gussInput.value = '';
setMessage(`You have ${gussNum} left!`, 'red')
}
}
});
function gameOver(won,msg){
let color;
won === true ? color = 'green' : color='red';
gussInput.disabled=true;
gussInput.style.borderColor = color;
// gussBtn.disabled=true;
setMessage(msg, color);
gussBtn.value='Play Again';
gussBtn.classList.add('play-again');
}
function RandNum(max,min) {
return Math.floor(Math.random()*(max-min+1)-min);
}
function setMessage(msg, color) {
message.textContent = msg;
message.style.color = color;
}
HTML
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Game Gusser</h1>
<p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
<div class="form-group" id="game">
<div class="input-group">
<input type="number" class="form-control" id="input" placeholder="Enter your guess...">
<input type="submit" class="btn btn-dark btn-block mt-4" id="gussBtn">
</div>
<p class="msg mt-4"></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
I want when clicking Play Again btn the page reloads and user can play it again.
It is possible that the className is not exactly 'play-again'.
Also why not simply 'click' event?
function hasClass ( elem , klass ) {
return (" " + elem.className + " " ).indexOf( " " + klass + " " ) > -1
};
let game = document.getElementById('game');
game.addEventListener('click', function(e){
if (hasClass(e.target , 'play-again')){
window.location.reload();
}
});
Would also recommend against using location.reload(). Extremely bad user experience. Why not simply re-run the script that initializes the game in the first place?

use of if condition in a chat box

I just don't know how to use IF condition here i use bubble chat too ,so when the textfield is empty the bubble chat gets updated without any texts.i don't want it.So how to use IF condition for it properly.
window.onload = function() {
document.getElementById("myText").focus();
};
function typo(){
var currentText = document.getElementById("demo").innerHTML;
var x = '<div><p class=bubble>' + document.getElementById("myText").value + '</p></div>';
document.getElementById("myText").value = "";
var y = document.getElementById("demo").innerHTML = currentText + x;
var z = document.getElementById('demo');
z.scrollTop = z.scrollHeight;
}
var input = document.getElementById("myText");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("btn-chat").click();
}
});
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Chat
<div class="btn-group"></div>
</div>
</div>
</div>
<div class="bottom">
<p id="demo"></p>
<input class="widebox" type="text" id="myText" value="">
<button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
</div>
</div>
here's the demo fiddle here
You can check to make sure there is at least a length of 1 char.
After looking at your demo you added, you can also make sure white space is gone by using trim() to check.
if (event.keyCode === 13 && input.value.trim().length > 0) {
https://jsfiddle.net/kkjbryqe/8/
if (event.keyCode === 13 && input.value.length)... could work?
i posted a demo in fiddle below my question ..So that i can be more clear of what am doing and thanks everyone for the time to look through my question and helping me out.I really appreciate

Need to find out how to make a button go out

currently, I have a countdown script that counts down to 15.
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button">
<form action="http://website.com">
<input type="submit" style="display: none;" value="Go to website"/>
<script>
var count = 15;
function countDown(){
var timer = document.getElementById("timer");
if(count > 0){
count--;
timer.innerHTML = count;
setTimeout("countDown()", 1000);
}else{
document.getElementById("button");
}
}
countDown();
</script>
It does it's job and counts down to fifteen. What I actually want to happen is that when the 15 seconds is up, it will instead show a button that says "Go to website".
Basically it's like other shortener but it's not.
I don't think document.getElementByID doesnt work. I've been looking for a way to make the button appear but it's not working.
Start with the button hidden, and remove that condition when the timer expires. A common way to do that is to use a "hidden" utility class, as shown below.
Note: Count in this snippet is 3, because I get bored waiting for 15 seconds each iteration. :)
var count = 3;
function countDown(){
var timer = document.getElementById("timer");
var button;
var skipContainer;
if(count > 0){
count--;
timer.innerHTML = count;
setTimeout("countDown()", 1000);
}else{
skipContainer = document.getElementById("skip");
button = document.getElementById("button");
skipContainer.classList.add("hidden");
button.classList.remove("hidden");
}
}
countDown();
.hidden {
display: none;
}
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button" class="hidden">
<form action="http://website.com">
<input type="submit" value="Go to website"/>
</form>
</div>
You could use setInterval() function that I think is more natural for the count down process. I reuse most code from #Palpatim answer.
var count = 3;
var myVar = setInterval(function(){ countDown() }, 1000);
function countDown() {
var timer = document.getElementById("timer");
var button;
var skipContainer;
if(count > 0){
count--;
timer.innerHTML = count;
}else{
myStopFunction();
skipContainer = document.getElementById("skip");
button = document.getElementById("button");
skipContainer.classList.add("hidden");
button.classList.remove("hidden");
}
}
function myStopFunction() {
clearInterval(myVar);
}
.hidden {
display: none;
}
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button" class="hidden">
<form action="http://website.com">
<input type="submit" value="Go to website"/>
</form>
</div>

SImon Says Javascript

So I want to make a simon says game with a functionality like this.
I have the following code :
HTML
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="count"></div>
<div id="buttons">
<button id="1" type="button" class="btn btn-default"onclick="add_sequence()">Simple </button>
<button id="2" type="button" class="btn btn-default">Strict </button>
<button id="3" type="button" class="btn btn-default">Restart</button>
</div>
JAVASCRIPT
var sequence = ["#red", "#blue", "#yellow", "#green","#red"]; //etc.
var human = [];
var i = 0;
function add_sequence() {
human.push(sequence[i])
animate(human);
$("" + human[i] + "").click(function() {
human.push(sequence[i])
animate(human);
i++;
}
function animate(s) {
var i = 0;
var interval = setInterval(function() {
anim(s[i]);
i++;
if (i >= s[i].length) {
clearInterval(interval);
}
}, 500);
}
function anim(id) {
$("" + id + "").delay(500)
.animate({
opacity: 1
}, 300)
.animate({
opacity: 0.5
}, 300)
}
My way of thinking is that every time I click on a button or series of buttons, (etc...), to add one element to the human array from the sequence array. In this way the next round will have an addition of one more lighting button.
BUT I can't do this with this code because the increment of the lighting buttons is done only when I click the first button(#red), not when I click the correct sequence of buttons.

Categories

Resources