Develop Reference

How to make Feedback disappear with user action in Javascript?

What do I need to add to the code, so that when the user clicks the button New or starts typing in the inputfield "userAnswer" for a second try, the Feedback disappears.
But the feedback should always appear when user clicks check
This is the simplified version of the code:
function F1() {
Z1 = document.getElementById("Z1");
Z2 = document.getElementById("Z2");
rZ1 = Math.floor((Math.random() * 10));
rZ2 = Math.floor((Math.random() * 10));
Z1.innerHTML = rZ1;
Z2.innerHTML = rZ2;
var operators1 = ['+', '-'];
oper1 = document.getElementById("operator1");
op1 = operators1[Math.floor(Math.random() * 2)];
oper1.innerHTML = op1;
rnd = parseFloat(eval(rZ1 + op1 + rZ2));
answer.innerHTML = rnd;
}
function F2() {
antw = parseFloat(document.getElementById("userAnswer").value);
feedBack = document.getElementById("feedBack");
ant = document.getElementById("answer").textContent;
{
if (antw == ant) {
feedBack.textContent = "good";
} else {
feedBack.textContent = "bad";
}
}
};
<button onclick="F1()"> New </button>
<label id="Z1"> </label>
<label id="operator1"> </label>
<label id="Z2"> </label>
= <input id="userAnswer" type=text>
<button onclick="F2()">check</button>
<p id="feedBack"> </p>
<p> <label id="answer"></label> </p>

I added a function at the end of the code to disappear with feedBack and a line was added in F1 and F2 to display and disappear with feedBack (I added a comment on those lines)
function F1() {
Z1 = document.getElementById("Z1");
Z2 = document.getElementById("Z2");
rZ1 = Math.floor((Math.random() * 10));
rZ2 = Math.floor((Math.random() * 10));
Z1.innerHTML = rZ1;
Z2.innerHTML = rZ2;
var operators1 = ['+', '-'];
oper1 = document.getElementById("operator1");
op1 = operators1[Math.floor(Math.random() * 2)];
oper1.innerHTML = op1;
rnd = parseFloat(eval(rZ1 + op1 + rZ2));
answer.innerHTML = rnd;
document.querySelector('p#feedBack').style.display = 'none' // add this
document.querySelector('#userAnswer').value = ''
}
function F2() {
antw = parseFloat(document.getElementById("userAnswer").value);
feedBack = document.getElementById("feedBack");
ant = document.getElementById("answer").textContent;
{
if (antw == ant) {
feedBack.textContent = "good";
} else {
feedBack.textContent = "bad";
}
}
document.querySelector('p#feedBack').style.display = 'block' // add this
};
document.querySelector('#userAnswer').addEventListener('keydown', event => {
if(document.querySelector('p#feedBack').style.display == 'block')
document.querySelector('p#feedBack').style.display = 'none'
})
<button onclick="F1()"> New </button>
<label id="Z1"> </label>
<label id="operator1"> </label>
<label id="Z2"> </label>
= <input id="userAnswer" type="text" >
<button onclick="F2()">check</button>
<p id="feedBack"></p>
<p> <label id="answer"></label> </p>

Add to the F1-function
document.getElementById('feedBack').classList.add('hidden');
and to the CSS a new entry for the hidden class to hide the element if exists.
For displaying the feedback if check is pressed remove similar in F2 this class.
document.getElementById('feedBack').classList.remove('hidden');
function F1() {
Z1 = document.getElementById("Z1");
Z2 = document.getElementById("Z2");
rZ1 = Math.floor((Math.random() * 10));
rZ2 = Math.floor((Math.random() * 10));
Z1.innerHTML = rZ1;
Z2.innerHTML = rZ2;
var operators1 = ['+', '-'];
oper1 = document.getElementById("operator1");
op1 = operators1[Math.floor(Math.random() * 2)];
oper1.innerHTML = op1;
rnd = parseFloat(eval(rZ1 + op1 + rZ2));
answer.innerHTML = rnd;
document.getElementById('feedBack').classList.add('hidden');
}
function F2() {
antw = parseFloat(document.getElementById("userAnswer").value);
feedBack = document.getElementById("feedBack");
ant = document.getElementById("answer").textContent;
{
if (antw == ant) {
feedBack.textContent = "good";
} else {
feedBack.textContent = "bad";
}
}
document.getElementById('feedBack').classList.remove('hidden');
};
.hidden { visibility: hidden; }
<button onclick="F1()"> New </button>
<label id="Z1"> </label>
<label id="operator1"> </label>
<label id="Z2"> </label>
= <input id="userAnswer" type=text>
<button onclick="F2()">check</button>
<p id="feedBack"> </p>
<p> <label id="answer"></label> </p>

Calculate the volume of cylinder with JavaScript using prototype

I'm a JavaScript noob and beginner so don't get too hard on me.
I need to calculate the volume of a cylinder using a constructor function and prototype.
I've got a form with two inputs which I'll be getting the values from to do the calculation with. I have to create a new instance when the button is clicked and the calculation has to be outputted in the outcome input.
I seem to be stuck at the part to get the values out of the inputs as my console always says that 'hoogte' and 'diameter' is undefined when I click the button.
I've been looking at this for almost 24h now, but I'm not getting any progress..
This is my code:
<form action="">
<label>
Diameter: <input type="text" id="diameter"><br><br>
Hoogte: <input type="text" id="hoogte"> <br><br>
<input type="button" value="bereken" id="berekenBtn"><br><br>
<input type="text" id="uitkomst">
</label>
</form>
<script>
window.addEventListener("DOMContentLoaded", function () {
document.getElementById("berekenBtn").addEventListener("click", bereken);
});
function Cylinder(hoogte, diameter) {
this.hoogte = hoogte;
this.diameter = diameter;
}
Cylinder.prototype.volume = function () {
var radius = document.getElementById('diameter') = this.diameter / 2;
var hoogte = document.getElementById('hoogte') = this.hoogte;
var berekening = Math.PI * radius * radius * hoogte;
//berekening.toFixed(4);
}
function bereken() {
var myCylinder = new Cylinder(
document.getElementById("uitkomst").value = Cylinder()
)
console.log(myCylinder);
}
</script>

<form action="">
<label>
Diameter: <input type="number" id="diameter"><br><br>
Hoogte: <input type="number" id="hoogte"> <br><br>
<input type="button" value="bereken" id="berekenBtn"><br><br>
<input type="text" id="uitkomst">
</label>
</form>
<script>
window.addEventListener("DOMContentLoaded", function () {
document.getElementById("berekenBtn").addEventListener("click", bereken);
});
function Cylinder(hoogte, diameter) {
this.hoogte = hoogte;
this.diameter = diameter;
}
Cylinder.prototype.volume = function () {
var radius = this.diameter / 2;
var hoogte = this.hoogte;
var berekening = Math.PI * radius * radius * hoogte;
return berekening;
}
function bereken() {
var diameter = document.getElementById("diameter").value;
var hoogte = document.getElementById("hoogte").value;
var myCylinder = new Cylinder(diameter, hoogte);
var result = myCylinder.volume();
document.getElementById("uitkomst").value = result;
}
</script>
I have modified some code, try to understand this, hope it will helps you !

How to make JavaScript basic shopping cart amount calculator

<script>
var itemquantity, appleamount, appletotalamount, bananaamount, bananatotalamount, gtotalfruits, gtotalfruitss
function apple() {
var itemquantity = document.getElementById("apple");
var appleamount = document.getElementById("appletotal");
var appletotalamount = itemquantity.value * 50;
appleamount.value = appletotalamount;
}
function banana() {
var itemquantity = document.getElementById("banana");
var bananaamount = document.getElementById("bananatotal");
var bananatotalamount = itemquantity.value * 30;
bananaamount.value = bananatotalamount;
}
function grandtotalfruits() {
var gtotalfruits = document.getElementById("grandtotalfruitss");
var gtotalfruitss = appletotalamount + bananatotalamount;
gtotalfruits.value = gtotalfruitss;
}
</script>
<div class="left">
<p class="fruit11">Apples - <input type="number" id="apple" class="shoppinginput" onChange="apple()" onchange="grandtotalfruits"> Rs.50/Kg</p>
<p class="fruit12">Total amount = Rs.<output id="appletotal"></output></p>
</div>
<div class="left">
<p class="fruit11">Bananas - <input type="number" id="banana" class="shoppinginput" onChange="banana()" onchange="grandtotalfruits"> Rs.30/Kg</p>
<p class="fruit12">Total amount = Rs.<output id="bananatotal"></output></p>
</div>
<div class="grandtotal">
<p class="fruit13">Grand total = Rs.<output id="grandtotalfruitss"></output></p>
</div>`
Take first input type="number" value1 * 100 show in output box and then take input type="number" value2 * 100 show in second output box, then add the value1 and value2 and show in output box 3. I am using JavaScript and am a beginner.
Can you see the design while reading the question?
It's working for output1 and output2, but not able create correct method or function for the grand total output of output1 and output2 in the third output box.

Basically, what #dev8989 said. Every time the user changes the "apples" value, you change the "apples quantity" (same for the "bananas"). You also have to update the "grand total" if any of the apples/bananas are updated. That's what #dev8989 suggested:
var $apples = document.getElementById('apples')
var $applesTotal = document.getElementById('apples-total')
var $bananas = document.getElementById('bananas')
var $bananasTotal = document.getElementById('bananas-total')
var $grandTotal = document.getElementById('grand-total')
function apple (v) { return 50 * v }
function banana (v) { return 30 * v}
$apples.addEventListener('change', function() {
$applesTotal.textContent = apple($apples.value)
$grandTotal.textContent = apple($apples.value) + banana($bananas.value)
})
$bananas.addEventListener('change', function() {
$bananasTotal.textContent = banana($bananas.value)
$grandTotal.textContent = apple($apples.value) + banana($bananas.value)
})
<input type="number" id="apples">
<p>Apples total: <span id="apples-total">0</span></p>
<input type="number" id="bananas">
<p>Bananas total: <span id="bananas-total">0</span></p>
<p>Grand total: <span id="grand-total">0</span></p>
Edit: here's the original code with the bugs fixed. See my comment on why this was necessary:
var itemquantity, appleamount, appletotalamount = 0, bananaamount, bananatotalamount = 0, gtotalfruits, gtotalfruitss
function apple() {
var itemquantity = document.getElementById("apple");
var appleamount = document.getElementById("appletotal");
appletotalamount = itemquantity.value * 50;
appleamount.value = appletotalamount;
grandtotalfruits();
}
function banana() {
var itemquantity = document.getElementById("banana");
var bananaamount = document.getElementById("bananatotal");
bananatotalamount = itemquantity.value * 30;
bananaamount.value = bananatotalamount;
grandtotalfruits();
}
function grandtotalfruits() {
var gtotalfruits = document.getElementById("grandtotalfruitss");
var gtotalfruitss = appletotalamount + bananatotalamount;
gtotalfruits.value = gtotalfruitss;
}
<div class="left">
<p class="fruit11">Apples - <input type="number" id="apple" class="shoppinginput" onChange="apple()" onchange="grandtotalfruits"> Rs.50/Kg</p>
<p class="fruit12">Total amount = Rs.<output id="appletotal"></output></p>
</div>
<div class="left">
<p class="fruit11">Bananas - <input type="number" id="banana" class="shoppinginput" onChange="banana()" onchange="grandtotalfruits"> Rs.30/Kg</p>
<p class="fruit12">Total amount = Rs.<output id="bananatotal"></output></p>
</div>
<div class="grandtotal">
<p class="fruit13">Grand total = Rs.<output id="grandtotalfruitss"></output></p>

Add the grandtotalfruit() in the apple() and banana() functions.
function apple() {
var itemquantity = document.getElementById("apple");
var appleamount = document.getElementById("appletotal");
var appletotalamount = itemquantity.value * 50;
appleamount.value = appletotalamount;
grandtotalfruit();
}
function banana() {
var itemquantity = document.getElementById("banana");
var bananaamount = document.getElementById("bananatotal");
var bananatotalamount = itemquantity.value * 30;
bananaamount.value = bananatotalamount;
grandtotalfruit();
}

onClick works only once

I input the values, and it works ONCE, which is a problem.
I try to change the numbers, and click Enter again, and it does nothing.
The only way it works again is if I use the scroll to up or down the current value.
var fuel = 2.5;
var mpg = 6;
function Hourly() {
var miles = document.getElementById('miles').value;
var brokerPay = document.getElementById('pay').value;
var gallons = miles / 6;
var hours = miles / 55;
var cost = gallons * fuel;
var net = brokerPay - cost
var hourlyPay = net / hours;
var newHeader = document.getElementById('changeMe');
newHeader.innerHTML = hourlyPay;
}
<h1 id="changeMe">Change me Here</h1>
<input type="number" placeholder="miles" id="miles" required/>
<input type="number" placeholder="Broker Pay" id="pay" required/>
<input type="submit" value="Enter" onclick="Hourly()" />

How to switch functions javascript

I'd like to make something small. When you enter Celsius, the program should calculate Fahrenheit and vice-versa. But when I enter the celsius and click the button it does the vice-versa aswell. Since I'm a beginner I don't really know how not to execute function2 if function1 activates. My javascript looks like this:
JS:
function Omrekenen() {
var celsius = document.getElementById('Celsius').value;
var fahrenheit = document.getElementById('Fahrenheit').value;
var r1 = (celsius * 1.8) + 32;
var r2 = (fahrenheit / 1.8) - 32;
}
function Leeg1() {
document.getElementById('Fahrenheit').value = "";
}
function Leeg2() {
document.getElementById('Celsius').value = "";
}
<div class="Oefening">
<h1 class="Titel">Oefening 3</h1>
Celsius: <input type="number" id="Celsius" placeholder="°C" onkeyup=Leeg1()> Fahrenheit: <input type="number" id="Fahrenheit" placeholder="°F" onkeyup="Leeg2()"><br />
<input type="button" id="button3" value="Zet om" onclick="Omrekenen(); Vast();" class="Button">
</div>

Here's one way of doing this.
Note that I'm checking for the length of the value from the input. You can't check the truthiness (if (celsius) ...) in this case, since a value of 0 is valid, but would evaluate to false. Checking the length should work for each case.
function Omrekenen() {
var celsius = document.getElementById('Celsius').value;
var fahrenheit = document.getElementById('Fahrenheit').value;
if (celsius.length !== 0) {
document.getElementById('Fahrenheit').value = (celsius * 1.8) + 32;
} else if (fahrenheit.length !== 0) {
document.getElementById('Celsius').value = (fahrenheit / 1.8) - 32;
}
}
function Leeg1() {
document.getElementById('Fahrenheit').value = "";
}
function Leeg2() {
document.getElementById('Celsius').value = "";
}
<div class="Oefening">
<h1 class="Titel">Oefening 3</h1>
Celsius: <input type="number" id="Celsius" placeholder="°C" onkeyup=Leeg1()> Fahrenheit: <input type="number" id="Fahrenheit" placeholder="°F" onkeyup="Leeg2()"><br />
<input type="button" id="button3" value="Zet om" onclick="Omrekenen();" class="Button">
</div>

You can use a state variable also, but you'd also want to handle the paste action in that case.
<script>
var isCalculatingCelsius;
function Omrekenen()
{
var celsius = document.getElementById('Celsius').value;
var fahrenheit = document.getElementById('Fahrenheit').value;
if (isCalculatingCelsius){
document.getElementById('Celsius').value = (fahrenheit / 1.8) - 32;
} else {
document.getElementById('Fahrenheit').value = (celsius * 1.8) + 32;
}
}
function Leeg1(){
isCalculatingCelsius = false;
document.getElementById('Fahrenheit').value = "";
}
function Leeg2(){
isCalculatingCelsius = true;
document.getElementById('Celsius').value = "";
}
</script>
<div class="Oefening">
<h1 class="Titel">Oefening 3</h1>
Celsius: <input type="number" id="Celsius" placeholder="°C" onkeyup="Leeg1()">
Fahrenheit: <input type="number" id="Fahrenheit" placeholder="°F" onkeyup="Leeg2()"><br />
<input type="button" id="button3" value="Zet om" onclick="Omrekenen()" class="Button">
</div>