Javascript Calculator is returning undefined - javascript

I have not been able to figure out why my calculator is returning undefined. I have it set up to return the result but I can't figure out why it doesn't return the actual calculation. I have console.log() my numbers and operator and they will show up but it never calculates. On the screen it returns undefined. Thanks so much to anyone that helps!
JS Code
const screen =document.querySelector('.screen')
const clear =document.querySelector('.clear')
const numberButtons =document.querySelectorAll('.numbers')
const operators =document.querySelectorAll('.operators')
const equal =document.querySelector('.equal')
let previousValue ='';
let currentValue ='';
let result = '';
//code for numbers to show values on screen
numberButtons.forEach(function(numberButton){
numberButton.addEventListener("click",function(){
screen.textContent+=numberButton.value;
currentValue=parseInt(screen.innerText);
})
})
// code for +-/*
operators.forEach(function(operators){
operators.addEventListener("click",function(){
screen.textContent+=operators.value;
currentValue=(screen.innerText);
})
})
//function for math equations
function calculate(operators,previousValue,currentValue) {
console.log(previousValue);
console.log(operators);
console.log(currentValue);
previousValue = parseInt(previousValue)
currentValue = parseInt(currentValue)
if (operators == '+') {
result = previousValue += currentValue
} else if (operators == '-') {
result = previousValue -= currentValue
} else if (operators == '*') {
result = previousValue *= currentValue
} else {
result = previousValue /= currentValue
}
screen.textContent += calculate.value
currentValue = (screen.innerText)
return result ;
}
//function to compute once equal is clicked
equal.addEventListener("click", button => {
screen.textContent+=equal.value;
currentValue=(screen.innerText);
if (previousValue != "" && currentValue != "" && operators != ""){
return result;
}
calculate(operators,previousValue,currentValue)
})
clear.addEventListener('click',() => location.reload());
CSS
html, body {
height: 100%;
width: 100%;
}
div.calc{
font-family: 'Courier New', monospace;
color: #FB6F92;
font-size: 40px ;
font-weight: bolder;
margin-left: 625px;
margin-top: 25px;
}
div.container{
background:#e7e7e7;
width: 500px;
height: 555px;
border-radius: 10px;
border: 5px solid #FB6F92;
margin-left: 500px;
margin-top: 25px;
box-shadow: 10px 10px 10px;
}
div.screen{
border: 5px solid #FB6F92;
color: black;
background: #f8f8ff;
width: 445px;
height: 100px;
border-radius: 10px;
margin-left: 20px;
font-size: 30px;
text-align: right;
font-weight: bold;
font-family: 'Courier New', monospace;
}
button.clear{
width: 450px;
height: 50px;
background:#FFCCF9;
color:black;
border-radius: 5px;
margin-left: 22px;
margin-top: 6px;
}
button.clear:hover{
background:#Ff9cee;
}
button.numbers{
width: 75px;
height: 75px;
background: pink;
color:white;
border-radius: 5px;
margin-left: 35px;
margin-top: 15px;
font-weight: bold;
font-size: 20px;
}
button.numbers:hover{
background: #FB6F92;
}
button.operators{
width: 75px;
height: 75px;
background: #A4E7DF;
color:black;
border-radius: 5px;
margin-left: 35px;
margin-top: 15px;
font-weight: bold;
font-size: 20px;
}
button.operators:hover{
background: #3bc6b6;
#64d4c7
}
button.equal{
width: 190px;
height: 75px;
background: #D1B2EA;
color:black;
border-radius: 5px;
margin-left: 35px;
margin-top: 15px;
font-weight: bold;
font-size: 20px;
}
button.equal:hover{
background:#b07cda;
}
footer{
font-family: 'Courier New', monospace;
color: #FB6F92;
font-size: 36px ;
font-weight: bolder;
margin-left: 510px;
margin-top: 20px;
}
html, body {
height: 100%;
width: 100%;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator TOP Project</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style = 'background-color :#a0ddfb;'>
<div class = "calc"> Calculator</div>
<div class = "container">
<br>
<div class="screen" value = "screen"></div>
<button class = "clear" onclick="clear();" >Clear</button>
<br>
<button class = 'numbers' value="7" > 7</button>
<button class = 'numbers' value="8">8</button>
<button class = 'numbers' value="9">9</button>
<button class = 'operators' value="÷"> ÷</button>
<br>
<button class = 'numbers' value="4">4</button>
<button class = 'numbers'value="5">5</button>
<button class = 'numbers' value="6">6</button>
<button class = 'operators' value="*" > ×</button>
<br>
<button class = 'numbers' value="1" >1</button>
<button class = 'numbers' value="2" >2</button>
<button class = 'numbers' value="3" >3</button>
<button class = 'operators' value = "-" >-</button>
<br>
<!-- <button class = 'numbers' value=".">.</button> -->
<button class = 'numbers' value ="0" >0</button>
<button class = 'equal' value="=" >=</button>
<button class = 'operators' value = "+" >+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Looks like you have a bad line.
Observe your js file on this line:
screen.textContent += calculate.value
calculate is the name of your function. It has no attribute value.
You probably want to replace calculate.value to result like so:
screen.textContent += result
Also you have some errors above that:
previousValue = parseInt(previousValue)
currentValue = parseInt(currentValue)
parseInt of an empty String will give you a a value of NaN (Not a number).
You also have a handful of logic bugs that you have to fix.
The undefined bug is just 1 bug that you have to fix.

Related

Vanilla JS budget app delete dynamically rendered income or expense

I've made a budgeting app that has expenses and Income tabs. Every time you add an expense or income, the app pushes the information inside of an array of objects and dynamically renders an <li> component and places it inside of a <ul>. I'm having trouble with the edit and delete features. Each individual <li> comes with a delete and edit button. The <li>, delete button, and edit button all have the same id of Date.now(). Date.now() is used because it produces a number based on milliseconds and won't produce the same id twice unless someone types an expense or income twice within one millisecond I want to click on the delete button inside of the <li> and have my app remove that individual object from my entry_list[] array and also remove the <li> from the DOM.
'use strict'
const balanceElement = document.querySelector(".balance .value");
const totalIncome = document.querySelector(".income-total");
const totalOutcome = document.querySelector(".outcome-total");
const incomeElement = document.querySelector(".income-tab");
const expense = document.querySelector(".expense-tab");
const all = document.querySelector(".all-tab");
const incomeList = document.querySelector(".income-tab .list");
const expenseList = document.querySelector(".expense-tab .list");
const allList = document.querySelector(".all-tab .list");
const expensesButton = document.querySelector(".tab1");
const incomeButton = document.querySelector(".tab2");
const allButton = document.querySelector(".tab3");
const addExpense = document.querySelector(".add-expense")
const expenseTitle = document.querySelector(".expense-title-input")
const expenseAmount = document.querySelector(".expense-amount-input")
const addIncome = document.querySelector(".add-income")
const incomeTitle = document.querySelector(".income-title-input")
const incomeAmount = document.querySelector(".income-amount-input")
const list = document.querySelector('.list')
//SWITCHING BETWEEN TABS
expensesButton.addEventListener('click', () => {
expense.classList.remove('hidden');
incomeElement.classList.add('hidden');
expensesButton.classList.add('clicked');
incomeButton.classList.remove('clicked');
})
incomeButton.addEventListener('click', () => {
incomeElement.classList.remove('hidden');
expense.classList.add('hidden');
expensesButton.classList.remove('clicked');
incomeButton.classList.add('clicked');
})
incomeList.addEventListener('click', deleteOrEdit)
expenseList.addEventListener('click', deleteOrEdit)
let entry_list = []
addExpense.addEventListener('click', () =>{
if(expenseTitle.value == '' || expenseAmount.value == ''){
return;
}
let expense = {
type: 'expense',
title: expenseTitle.value,
amount: expenseAmount.value,
id: Date.now()
}
entry_list.push(expense)
clearExpense()
changeLists()
})
addIncome.addEventListener('click', () =>{
if(incomeTitle.value == '' || incomeAmount.value == ''){
return;
}
let income = {
type: 'income',
title: incomeTitle.value,
amount: incomeAmount.value,
id: Date.now()
}
entry_list.push(income)
clearIncome()
changeLists()
})
const clearExpense = () =>{
expenseTitle.value = '';
expenseAmount.value = '';
}
const clearIncome = () =>{
incomeTitle.value = ''
incomeAmount.value = ''
}
const changeLists = () =>{
expenseList.innerHTML = ''
incomeList.innerHTML = ''
entry_list.map((entry) =>{
if(entry.type == 'expense'){
return expenseList.innerHTML += `<li id = "${entry.id}" class= "${entry.type}">
<div class = "entry">${entry.title}: $${entry.amount}</div>
<div class="icon-container">
<div class = "edit" id="${entry.id}"></div>
<div class ="delete" id="${entry.id}"></div>
</div>
</li>`
}
else if(entry.type == 'income'){
return incomeList.innerHTML += `<li id = "${entry.id}" class= "${entry.type}">
<div class = "entry">${entry.title}: $${entry.amount}</div>
<div class="icon-container">
<div class = "edit" id="${entry.id}"></div>
<div class ="delete" id="${entry.id}"></div>
</div>
</li>`
}
})
addIncomes()
}
const addIncomes = () =>{
let sum = 0;
let income = 0;
let outcome = 0;
balanceElement.innerHTML = 0
totalIncome.innerHTML = 0
totalOutcome.innerHTML = 0
entry_list.forEach(list =>{
if(list.type == 'expense'){
sum -= list.amount
outcome -= list.amount
}else if(list.type == 'income'){
sum += Number(list.amount)
income += Number(list.amount)
}
balanceElement.innerHTML = '$' + sum
totalIncome.innerHTML = '$' + income
totalOutcome.innerHTML = '$' + outcome
})
}
// // DETERMINE IF BUTTON IS EDIT OR DELETE
function deleteOrEdit(e){
const targetButton = e.target;
const entry = targetButton.parentNode.parentNode;
if(targetButton.classList == ('delete')){
deleteEntry(entry)
}else if(targetButton.classList == ('edit')){
editEntry(entry);
}
}
// //DELETE FUNCTION
const deleteEntry = (entry) =>{
console.log(entry.id)
entry_list.splice(entry.id, 1)
// entry.innerHTML = ''
console.log(entry.id)
addIncomes()
}
// EDIT FUNCTION
const editEntry = (entry) =>{
let Entry = entry_list[entry.id]
if(entry.type == "income"){
incomeAmount.value = Entry.amount;
incomeTitle.value = Entry.title;
}else if(entry.type == "expense"){
expenseAmount.value = Entry.amount;
expenseTitle.value = Entry.title;
}
deleteEntry(entry);
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&family=Raleway:wght#400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.budget-container{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background-color: #4F98CA;
}
.balance-container{
width: 360px;
height: 470px;
background-color: #50D890;
border-radius: 30px;
margin-right: 100px;
}
.app-title{
color: white;
margin-top: 1rem;
margin-left: 1rem;
}
.month{
color: white;
margin-top: 1rem;
text-align: center;
}
.budget-header{
display: flex;
flex-direction:column;
justify-content: center;
}
.balance{
margin-top: 1rem;
margin-left: 1rem;
}
.title{
color: white;
font-size: 1.25rem;
opacity: .75;
}
.value{
font-size: 1.75rem;
color: white;
font-weight: bold;
margin-left: 1rem;
}
.account{
margin-top: 2.5rem;
margin: 2.5rem 1.5rem 2.5rem 1.5rem;
display: flex;
justify-content: space-between
}
.income-total{
color: white;
text-align: center;
font-size: 1.5rem;
}
.outcome-total{
color: #4F98CA;
text-align: center;
font-size: 1.5rem;
}
/* DASHBOARD */
.budget-dashboard{
display: block;
width: 360px;
height: 470px;
position: relative;
border-radius: 30px;
background-color: white;
}
.dash-title{
margin-top: 2rem;
margin-left: 1rem;
font-size: 1.5rem;
}
.toggle{
margin: 1rem;
display: flex;
cursor: pointer;
}
.toggle .tab2, .tab3{
margin-left: 1rem;
cursor: pointer;
}
.clicked{
font-weight: bold !important;
}
.hidden{
display: none !important;
}
/* EXPENSES TAB */
.expense-tab{
display: flex;
justify-content: center;
}
.expense-input-container{
position: absolute;
top: 400px;
border-top: solid 1px gray;
width: 100%;
}
.expense-amount-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.expense-title-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.add-expense{
color: none;
background-color: none;
border: none;
outline: none;
color: inherit;
}
/* INCOME TAB */
.income-tab{
display: flex;
justify-content: center;
}
.income-input-container{
position: absolute;
top: 400px;
border-top: solid 1px gray;
width: 100%;
}
.input{
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem;
}
.income-amount-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.income-title-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.add-income{
color: none;
background-color: none;
border: none;
outline: none;
}
.plus-img{
width: 40px;
}
/* li */
ul{
width: 360px;
height: 255px;
list-style: none;
margin-top:20px;
overflow-x: auto;
}
/* BUTTON ICONS */
.edit{
background-image: url('media/Icons/icons8-edit-48.png');
background-size: contain;
width: 25px;
height: 25px;
background-repeat: no-repeat;
margin-right: 10px;
}
.delete{
background-image: url('media/Icons/icons8-trash-can-48 (2).png');
background-size: contain;
width:25px;
height: 25px;
background-repeat: no-repeat;
}
.income{
width:250px;
height: auto;
padding-left: 20px;
margin-bottom: 10px;;
word-wrap: break-word;
color: black
}
.expense{
width:250px;
height: auto;
padding-left: 20px;
margin-bottom: 10px;;
word-wrap: break-word;
font-family: 'Gilroy Bold';
color: #4F98CA;
}
li{
display: flex;
justify-content: space-between;
width: 100% !important;
padding-right: 20px;
}
.icon-container{
display: flex;
}
#media (max-width:900px){
.budget-container{
display: inline-block;
position: relative
}
.balance-container{
position: absolute;
top: 10%;
left: 25%;
}
.budget-dashboard{
position: absolute;
left: 25%;
top: 40%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Budgetrr</title>
</head>
<body>
<main class="budget-container">
<section class="balance-container">
<div class="app-title">
<p>Budgetrr</p>
</div>
<h1 class="month">OCTOBER</h1>
<section class="budget-header">
<div class="balance">
<div class="title">
Balance
</div>
<div class="value">
<small>$</small>0
</div>
</div>
<div class="account">
<div class="budget-income">
<div class="title">
Income
</div>
<div class="income-total">
<small>$</small>0
</div>
</div>
<div class="chart"></div>
<div class="budgetoutcome">
<div class="title">
Expenses
</div>
<div class="outcome-total">
<small>$</small>0
</div>
</div>
</div>
</section>
</section>
<section class="budget-dashboard">
<div class="dash-title">Dashboard</div>
<div class="toggle">
<div class="tab1 clicked">Expenses</div>
<div class="tab2">Income</div>
<!-- <div class="tab3 clicked">All</div> -->
</div>
<div class="income-tab hidden">
<ul class="list"></ul>
<div class="income-input-container">
<form class="input">
<input type="text" class="income-title-input" name="title" placeholder="Title">
<input type="number" class="income-amount-input" name="amount" placeholder="$0">
<button type = "button" class="add-income"><img class= "plus-img"src="media/Icons/icons8-add-new-48.png" alt=""></button>
</form>
</div>
</div>
<div class = "expense-tab">
<ul class="list"></ul>
<div class="expense-input-container">
<div class="input">
<input type="text" class="expense-title-input" name="title" placeholder="Title">
<input type="number" class="expense-amount-input" name="amount" placeholder="$0">
<button type="button" class="add-expense"><img class= "plus-img" src="media/Icons/icons8-add-new-48.png" alt=""></button>
</div>
</div>
</div>
</section>
</main>
<script src="JavaScript/budget.js"></script>
</body>
</html>
I've tried to use .splice() but I can't seem to get it to work.
Your entry is an object. And entry has an id property with Date type.
Your delete function calls this:
entry_list.splice(entry.id, 1)
Javascript splice function
function takes number as argument(s).
You should find the id of element you want to delete and get its index. After that you can delete the element with splice method.
Here is how to delete:
// Find the index of object at the given list
const index = entry_list.findIndex(x => x.id === entry.id);
// Starting from index of element to delete, remove 1 element.
entry_list.splice(index, 1);

Progressbar with vertical line

I am implementing a simulation of a Dutch- and an English-auction in otree.
For the interface, I am using a progress bar for the price that the supplier gets.
In the English-auction the price increases every half second and in the Dutch-auction the price decreases every half second.
Now I want to add a vertical line for the costs of the supplier, which changes every round.
How can i add a vertical line to the progress bar?
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myCosts {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 100%;
height: 30px;
background-color: #40bf80;
text-align: center;
line-height: 30px;
color: white;
}
#costLine{
width: 0%;
height: 30px;
background-color: #FF0000;
text-align: center;
line-height: 30px;
color: white;
}
.bg-info{
background-color: #ddd;
}
</style>
Your costs for this round are:
<div id="myCosts">
<div id="costLine">{{player.cost}}</div>
</div>
Current price is:
<div id="myProgress">
<div id="myBar">$200</div>
</div>
<p></p>
<p id="Message"></p>
<script>
var left_line = ({{player.cost|json}}-101);
var right_line = (200-{{player.cost|json}});
let cost = {{player.cost|json}}
let bot_stop = {{player.bot_stop|json}};
let price = {{Constants.start_value|json}};
var Auction;
var Auction2;
document.getElementById("costLine").innerHTML = "$"+cost;
document.getElementById("costLine").style.width = cost-100+'%';
function startAuction(){
document.getElementById("stop_button").disabled = false;
document.getElementById("start_button").disabled = true;
Auction = setInterval(function(){
if(price == bot_stop){
document.getElementById("Message").innerHTML = 'The other supplier has dropped out. You win with a price of ' + bot_stop;
document.getElementById("stop_button").innerHTML = 'Next Page'
stopAuction();
}
if(price != bot_stop){
price = price -1;
document.getElementById("myBar").innerHTML='$'+price;
document.getElementById("myBar").style.width = (price-100) +'%';
}
},500)
}
function stopAuction() {
document.querySelector("[name=winning_price]").value = price;
document.getElementById("stop_button").innerHTML = 'Next Page'
clearInterval(Auction);
}
</script>
<button type="button" class="otree-btn-next btn btn-primary" id="start_button" onclick="startAuction()">Start Auction</button>
<button class="otree-btn-next btn btn-primary" disabled id="stop_button" onclick="stopAuction()">Drop Out</button>
<p></p>
<p></p>
<input type="hidden" name="winning_price" />
Add a child element <div id=myBarPrice></div> to <div id="myProgress">.
Add position: relative; attribute to the #myProgress selector.
Add new style block for a new element:
#myBarPrice {
background-color: #FF0000;
width: 2px;
height: 100%;
position: absolute;
right: 100%;
top: 0;
}
Set #myBarPrice position with js:
...
document.getElementById("costLine").innerHTML = "$"+cost;
document.getElementById("costLine").style.width = cost-100+'%';
document.getElementById("myBarPrice").style.right = cost+'%'; // <=====
function startAuction(){
document.getElementById("stop_button").disabled = false;
document.getElementById("start_button").disabled = true;
...
Here is a mockup in codepen.io
CSS code:
#myProgress {
width: 100%;
background-color: #ddd;
position: relative;
}
#myCosts {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 80%;
height: 30px;
background-color: #40bf80;
text-align: center;
line-height: 30px;
color: white;
}
#myBarPrice {
background-color: #FF0000;
width: 2px;
height: 100%;
position: absolute;
right: 40%;
top: 0;
}
#costLine{
width: 60%;
height: 30px;
background-color: #FF0000;
text-align: center;
line-height: 30px;
color: white;
}
.bg-info{
background-color: #ddd;
}
HTML code:
Your costs for this round are:
<div id="myCosts">
<div id="costLine">{{player.cost}}</div>
</div>
Current price is:
<div id="myProgress">
<div id="myBar">$200</div>
<div id=myBarPrice></div>
</div>

Javascript file partially running

So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>
Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Having Trouble With JavaScript Location Reload

I'm creating my first JavaScript calculator, and I thought I could cheat on the clear button by reloading the page, but it doesn't seem to work. I have tried online editors, reopening chrome, moving files, and it still doesn't seem to work I don't know why, but help would be greatly appreciated.
EDIT: Sorry for taking so long, as you can see I now have the HTML and CSS to go with the JavaScript
var firstNumber = [];
var secondNumber = [];
let current = 'firstNumber';
var operation;
function clear(){
location.reload();
}
function set(number){
if (current == 'firstNumber'){
firstNumber.push(number);
}
else{
secondNumber.push(number);
}
document.getElementById('answer').innerHTML = number;
}
function change(operator){
current = 'secondNumber';
operation = operator;
if (operation == 'addition'){
return document.getElementById('answer').innerHTML = '+';
}
else if (operation == 'subtraction'){
return document.getElementById('answer').innerHTML = "-";
}
else if (operator == 'multiplication'){
return document.getElementById('answer').innerHTML = 'x';
}
else if (operator == 'multiplication'){
}
return document.getElementById("answer").innerHTML = '÷';
}
function solve(){
firstNumber = firstNumber.join('');
secondNumber = secondNumber.join('');
firstNumber = parseInt(firstNumber);
secondNumber = parseInt(secondNumber);
if (operation == 'addition'){
return document.getElementById("answer").innerHTML = firstNumber + secondNumber;
}
else if (operation == 'subtraction'){
return document.getElementById('answer').innerHTML = firstNumber - secondNumber;
}
else if (operation == 'multiplication'){
return document.getElementById("answer").innerHTML = firstNumber * secondNumber;
}
else if (operation == 'division'){
return document.getElementById('answer').innerHTML = firstNumber / secondNumber;
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
h1{
text-align: center;
font-family: monospace;
font-weight: bold;
font-size: 75px;
text-shadow: 3px 3px 15px red;
}
#container{
display: flex;
flex-direction: column;
width: 50%;
height: 500px;
margin-left: 25%;
}
.row{
display: flex;
flex-direction: row;
height: 15%;
margin-top: 1%;
width: 100%;
}
button{
width: 30%;
text-align: center;
margin: 5px;
font-size: 35px;
background-color: rgb(255, 0, 0);
border-color: purple;
}
#answer{
border-style: solid;
border-color: red;
border-width: 3px;
border-radius: 5px;
width: 95%;
height: 35px;
text-align: center;
font-size: 25px;
font-weight: bold;
}
#wide{
width: 95%;
height: 35px;
text-align: center;
font-size: 25px;
font-weight: bold;
}
body{
background-image: linear-gradient(to bottom right, rgb(0, 0, 255), rgb(100, 0, 255));
}
<!doctype html>
<html>
<head>
<title>Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/calculator.css">
<script src="/static/calculator.js"></script>
</head>
<body>
<h1>Calculator</h1>
<br />
<div id="container">
<p id="answer"></p>
<button onclick="solve()" id="wide">=</button>
<div class="row">
<button onclick="set(1)">1</button>
<button onclick="set(2)">2</button>
<button onclick="set(3)">3</button>
</div>
<div class="row">
<button onclick="set(4)">4</button>
<button onclick="set(5)">5</button>
<button onclick="set(6)">6</button>
</div>
<div class="row">
<button onclick="set(7)">7</button>
<button onclick="set(8)">8</button>
<button onclick="set(9)">9</button>
</div>
<div class="row">
<button onclick="set(0)">0</button>
<button onclick="change('addition')">+</button>
<button onclick="change('subtraction')">-</button>
</div>
<div class="row">
<button onclick="change('multiplication')">x</button>
<button onclick="change('division')">/</button>
<button onclick="clear()">c</button>
</div>
</div>
</body>
</html>
It seems that clear() requires to bind an event listener in the DOM, for example:
<button id="clear">c</button>
<script>document.getElementById("clear").addEventListener("click", clear);</script>
Or, alternatively, use document.clear() (deprecated) or window.clear().
See related question:
Is "clear" a reserved word in Javascript?
https://developer.mozilla.org/en-US/docs/Web/API/Document/clear
To avoid that, simply rename clear() function to clearResult() and it will work.
See modified snippet below.
In addition, instead of location.reload(); you can simply clear content of the answer as a faster alternative:
document.getElementById('answer').innerHTML = '';
var firstNumber = [];
var secondNumber = [];
let current = 'firstNumber';
var operation;
function clearResult(){
location.reload();
}
function set(number){
if (current == 'firstNumber'){
firstNumber.push(number);
}
else{
secondNumber.push(number);
}
document.getElementById('answer').innerHTML = number;
}
function change(operator){
current = 'secondNumber';
operation = operator;
if (operation == 'addition'){
return document.getElementById('answer').innerHTML = '+';
}
else if (operation == 'subtraction'){
return document.getElementById('answer').innerHTML = "-";
}
else if (operator == 'multiplication'){
return document.getElementById('answer').innerHTML = 'x';
}
else if (operator == 'multiplication'){
}
return document.getElementById("answer").innerHTML = '÷';
}
function solve(){
firstNumber = firstNumber.join('');
secondNumber = secondNumber.join('');
firstNumber = parseInt(firstNumber);
secondNumber = parseInt(secondNumber);
if (operation == 'addition'){
return document.getElementById("answer").innerHTML = firstNumber + secondNumber;
}
else if (operation == 'subtraction'){
return document.getElementById('answer').innerHTML = firstNumber - secondNumber;
}
else if (operation == 'multiplication'){
return document.getElementById("answer").innerHTML = firstNumber * secondNumber;
}
else if (operation == 'division'){
return document.getElementById('answer').innerHTML = firstNumber / secondNumber;
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
h1{
text-align: center;
font-family: monospace;
font-weight: bold;
font-size: 75px;
text-shadow: 3px 3px 15px red;
}
#container{
display: flex;
flex-direction: column;
width: 50%;
height: 500px;
margin-left: 25%;
}
.row{
display: flex;
flex-direction: row;
height: 15%;
margin-top: 1%;
width: 100%;
}
button{
width: 30%;
text-align: center;
margin: 5px;
font-size: 35px;
background-color: rgb(255, 0, 0);
border-color: purple;
}
#answer{
border-style: solid;
border-color: red;
border-width: 3px;
border-radius: 5px;
width: 95%;
height: 35px;
text-align: center;
font-size: 25px;
font-weight: bold;
}
#wide{
width: 95%;
height: 35px;
text-align: center;
font-size: 25px;
font-weight: bold;
}
body{
background-image: linear-gradient(to bottom right, rgb(0, 0, 255), rgb(100, 0, 255));
}
<!doctype html>
<html>
<head>
<title>Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/calculator.css">
<script src="/static/calculator.js"></script>
</head>
<body>
<h1>Calculator</h1>
<br />
<div id="container">
<p id="answer"></p>
<button onclick="solve()" id="wide">=</button>
<div class="row">
<button onclick="set(1)">1</button>
<button onclick="set(2)">2</button>
<button onclick="set(3)">3</button>
</div>
<div class="row">
<button onclick="set(4)">4</button>
<button onclick="set(5)">5</button>
<button onclick="set(6)">6</button>
</div>
<div class="row">
<button onclick="set(7)">7</button>
<button onclick="set(8)">8</button>
<button onclick="set(9)">9</button>
</div>
<div class="row">
<button onclick="set(0)">0</button>
<button onclick="change('addition')">+</button>
<button onclick="change('subtraction')">-</button>
</div>
<div class="row">
<button onclick="change('multiplication')">x</button>
<button onclick="change('division')">/</button>
<button onclick="clearResult()">c</button>
</div>
</div>
</body>
</html>

Display only one div at a time with JavaScript

I am just fooling around with some JavaScript, I am new to it so this is probably a simple solution. Basically what I want is for only 1 div to be visible at a time so if a user clicks on one link to expose a div the current div that is exposed will collapse and the new one clicked will appear.
I have included the code below:
<html>
<head>
<title> test</title>
<LINK href="blah.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "restore";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
function toggle22(showHideDiv2, switchTextDiv2) {
var ele = document.getElementById(showHideDiv2);
var text = document.getElementById(switchTextDiv2);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "restore";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
</script>
</head>
<body>
<div id="mainContent">
<div id="headerDiv">
<div id="titleText">Change Password - Click here ==></div><a id="myHeader" href="javascript:toggle2('myContent','myHeader');" >restore</a>
</div>
<div style="clear:both;"></div>
<div id="contentDiv">
<div id="myContent" style="display: none;">This is the content that is dynamically being collapsed.</div>
<!--DIV2 -->
<div id="headerDiv2">
<div id="titleText2">Change Username - Click here ==></div><a id="myHeader2" href="javascript:toggle22('myContent2','myHeader2');" >restore</a>
</div>
<div style="clear:both;"></div>
<div id="contentDiv2">
<div id="myContent2" style="display: none;">This is the content that is dynamically being collapsed.</div>
</div>
</div>
</body>
</html>
The CSS:
#headerDiv, #contentDiv {
float: left;
width: 510px;
}
#titleText {
float: left;
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#myHeader {
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#headerDiv {
background-color: #0037DB;
color: #9EB6FF;
}
#contentDiv {
background-color: #FFE694;
}
#myContent {
margin: 5px 10px;
}
#headerDiv a {
color: gold;
float: right;
margin: 10px 10px 5px 5px;
}
#headerDiv a:hover {
color: #FFFFFF;
}
#headerDiv2, #contentDiv2 {
float: left;
width: 510px;
}
#titleText2 {
float: left;
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#myHeader2 {
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#headerDiv2 {
background-color: #0037DB;
color: #9EB6FF;
}
#contentDiv2 {
background-color: #FFE694;
}
#myContent2 {
margin: 5px 10px;
}
#headerDiv2 a {
color: gold;
float: right;
margin: 10px 10px 5px 5px;
}
#headerDiv2 a:hover {
color: #FFFFFF;
}
style.display only reflects the style that's been explicitly set on the element. Unless you specify it with style="display:block" in HTML, the initial value of style.display will be empty, even though the default value of that property, applied by CSS cascading, is indeed block.

Categories