HTML5 Progress Bar not working - javascript

I look for similar question pertaining to my problem but couldn't fine any solution to it. I was doing an example of progress bar in HTML5, I tried IE and Chrome but the GO button isn't setting the progress bar in motion.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>HTML5 Progress Bar</title>
<script type="text/javascript">
function go();
{
var inc = 0;
var doIt = setInterval(updateProgress,50);
function updateProgress()
{
inc++;
if (inc > 100)
{
document.getElementById("output").innerHTML = "Done!";
} else
{
document.getElementById("output").innerHTML = inc+ "%";
document.getElementById("progress1").value = inc;
}
}
}
</script>
</head>
<body>
<progress id = "progress1" value="0" min="0" max="100" style="width:300px;"> </progress> <br>
<span id="output"> </span> <br> <br>
<button id= "go" onclick="go()"> GO </button>
</body>
</html>

That's because there is a semicolon ; after your go function before your curly braces start. Try running the snippet below.
function go() {
var inc = 0;
var doIt = setInterval(updateProgress, 50);
function updateProgress() {
inc++;
if (inc > 100) {
document.getElementById("output").innerHTML = "Done!";
} else {
document.getElementById("output").innerHTML = inc + "%";
document.getElementById("progress1").value = inc;
}
}
}
<progress id="progress1" value="0" min="0" max="100" style="width:300px;"> </progress> <br>
<span id="output"> </span> <br> <br>
<button id="go" onclick="go()"> GO </button>

The issue is that you have a semicolon ; after go();, it should look like
function go()
{
var inc = 0;
var doIt = setInterval(updateProgress,50);
function updateProgress()
{
inc++;
if (inc > 100)
{
document.getElementById("output").innerHTML = "Done!";
} else
{
document.getElementById("output").innerHTML = inc+ "%";
document.getElementById("progress1").value = inc;
}
}
}

Related

Problem with modifying JavaScript/HTML code

I've got a problem with modifying my code. I need to edit my code so it will not only do its purpose (the thing that it does now) but it will count from 1 to given number.
The code is in Polish and it's simple. It's purpose for now is to calculate the factorial of given number.
Here's the code:
function obliczSilnie(liczba) {
var wynik = silnia(liczba);
if (wynik > 0) {
document.getElementById("result").innerHTML =
"<h3 style'color:blue;'>Silnia liczby " + liczba +
"wynosi: " + wynik + "</h3>";
}
}
function silnia(liczba) {
if (liczba == 0 || liczba == 1) {
return 1;
} else if (liczba < 0) {
error();
return -1;
}
var wynik = liczba * silnia(liczba - 1);
return wynik;
}
function error() {
document.getElementById("result").innerHTML =
"<h3 style='color:red;'>Błąd: Nie można obliczyć silni dla liczby ujemnej! </h3>";
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Obliczanie silni</h1>
<form name="myForm">
<p> <b>Podaj liczbę:</b>
<input type="number" name="myNumber" value="0" size=2> </p>
<input type="reset" value="Wyczyść">
<input type="button" value="Obilcz" onclick="obliczSilnie(document.myForm.myNumber.value)">
</form>
<p id="result"></p>
</body>
</html>
I hope I understood your question correctly. That's my solution:
function computeFactors(number) {
//Here we use recursion with a for loop
for(var i = 1;i < number;i++){
var result = factorial(i);
if (result > 0) {
document.getElementById("result").innerHTML +=
"<h3 style='color:blue;'> Factorial of " + i +
" is: " + result + "</h3>";
}
}
}
function factorial(number) {
if (number == 0 || number == 1) {
return 1;
} else if (number < 0) {
error();
return -1;
}
var result = number * factorial(number - 1);
return result;
}
function error() {
document.getElementById("result").innerHTML =
"<h3 style='color:red;'>Error: Could not factorize a negative number! </h3>";
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Factory calculation</h1>
<form name="myForm">
<p> <b>Enter a number:</b>
<input type="number" name="myNumber" value="0" size=2> </p>
<input type="reset" value="Clear">
<input type="button" value="Calculate" onclick="computeFactors(document.myForm.myNumber.value)">
</form>
<p id="result"></p>
</body>
</html>

This else runs even if the if was true

What this program its supposed to do is first with a range input you put how many elements you want to guess then it will show a random element form a json list and you have to guess the valnce and then it will load annother one and you continue. OK when i run this code everything is normal until you click submit button two times. When i click the submit botton the first time its goes well but the second time the program runs the if in the line 41 but it also runs the code in the else and if you submit more times it will run the alerts more and more times.
I have tried doing it other ways like just putting all into a for but it still runing code i dont want to.
const $ = require('jquery');
let elementoActual;
let valorPositivoCorrecto;
let valorNegativoCorrecto;
let valorCuadroNegativo;
let valorCuadroPositivo;
// Button on click add the element
$(document).ready(function() {
$("#startButton").click(function() {
$(".hide").hide();
let questionHTML = '<div class="elementoQuimico"><img id="imgElemnt" src="" alt=""></div>' +
'<div class="valenciasElemento">' +
'<input type="text" class="valorPositivo" placeholder="Valencias positivas">' +
'<input type="text" class="valorNegativo" placeholder="Valencias negativas">' +
'</div>' +
'<button class="submitButtonElement">SUBMIT</button>';
$(".questions").append(questionHTML);
putAnElement();
}); //onclick ends
}) //ready ends
function putAnElement() {
let numb = $("#textInput").val();
let counter = 0;
$.getJSON("../../json/valencias.json", function(data) {
let numeroDeElemento = Math.floor(Math.random() * 3);
elementoActual = data[numeroDeElemento];
valorNegativoCorrecto = data[numeroDeElemento].valenciasNegativas;
valorPositivoCorrecto = data[numeroDeElemento].valenciasPositivas;
//$("#imgElemnt").attr( "src" , elementoActual.img);
$("#imgElemnt").attr("alt", elementoActual.name);
$("#imgElemnt").attr("width", "200px");
$("#imgElemnt").attr("height", "200px");
alert(numb);
$(".submitButtonElement").click(function() {
valorCuadroNegativo = $(".valorNegativo").val();
valorCuadroPositivo = $(".valorPositivo").val();
$(".valorNegativo").val("");
$(".valorPositivo").val("");
if (valorCuadroNegativo === valorNegativoCorrecto &&
valorCuadroPositivo === valorPositivoCorrecto) {
alert("correcto");
counter++;
alert(counter);
if (counter != numb){
putAnElement();
} else {
alert("ya");
}
} else {
alert("incorrecto");
counter++;
alert(counter);
if (counter != numb) {
putAnElement();
} else {
alert("ya");
}
}
});
}); //getJSON ends
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabla periodica</title>
<link rel="stylesheet" href="../../css/periodic-table.css">
</head>
<body>
<div class="wrapper">
<div class="hide">
<h1>TABLA PERIODICA</h1>
<img src="../../img/tabla-valencias.png">
<div class="buttons">
<button id="startButton">EMPEZAR</button>
<form id="submit-tabla">
<label for="rangeInput"></label><input type="range" name="amountRange" id="rangeInput" min="10" max="30" value="20" oninput="this.form.amountInput.value=this.value" />
<label for="textInput"></label><input type="number" name="amountInput" id="textInput" min="10" max="30" value="20" oninput="this.form.amountRange.value=this.value" />
</form>
</div>
</div>
<div class="questions">
</div>
</div>
<footer>
2017 &COPY; Nestor and Diego
</footer>
<script src="chemistry.js"></script>
</body>
</html>
And here is the json
[
{
"name":"hidrogeno",
"valenciasNegativas":"-1",
"valenciasPositivas":"1",
"img":"img/Hidrogeno.svg"
},
{
"name":"litio",
"valenciasNegativas":"",
"valenciasPositivas":"1",
"img":"img/Litio.svg"
},
{
"name":"sodio",
"valenciasNegativas":"",
"valenciasPositivas":"1",
"img":"img/Sodio.svg"
}
]

Increment and Decrement price value on Change

i'm trying to do an price counter synchronizing with increment and decrement buttons, but the price is not changing when i click one of the buttons (+/-) this is not working, how can i solve this issue? Thanks!!!
$('#plus').click(function add() {
var $qtde = $("#quantity");
var a = $qtde.val();
a++;
$("#minus").attr("disabled", !a);
$qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());
$('#minus').click(function minust() {
var $qtde = $("#quantity");
var b = $qtde.val();
if (b >= 1) {
b--;
$qtde.val(b);
}
else {
$("#minus").attr("disabled", true);
}
});
/* On change */
$(document).ready(function()
{
function updatePrice()
{
var price = parseFloat($("#quantity").val());
var total = (price + 1) * 1.05;
var total = total.toFixed(2);
$("#total-price").val(total);
}
$(document).on("change, keyup, focus", "#quantity", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value=""/>
If you change your binding to update whenever there is a click on an input, you'll get the behavior that you are expecting.
$('#plus').click(function add() {
var $qtde = $("#quantity");
var a = $qtde.val();
a++;
$("#minus").attr("disabled", !a);
$qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());
$('#minus').click(function minust() {
var $qtde = $("#quantity");
var b = $qtde.val();
if (b >= 1) {
b--;
$qtde.val(b);
} else {
$("#minus").attr("disabled", true);
}
});
/* On change */
$(document).ready(function() {
function updatePrice() {
var price = parseFloat($("#quantity").val());
var total = (price + 1) * 1.05;
var total = total.toFixed(2);
$("#total-price").val(total);
}
// On the click of an input, update the price
$(document).on("click", "input", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value="" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="sp-quantity">
<div class="container" style=" font-size:14px; ">
<div class="sp-input">
<input type="text" class="quantity-input" value="1">
<div class="button" style="cursor: pointer;">
+
</div>
<div class="button" style="cursor: pointer;">
-
</div>
</div>
<p>custom filed</p>
<div class="sp-input">
<input type="text" class="quantity-input-db" value="1.8" step="1.8">
<div class="button" style="cursor: pointer;">
+
</div>
<div class="button" style="cursor: pointer;">
-
</div>
</div>
</div>
</div>
<script type="text/javascript">
// debugger;
$(document).ready(function () {
$(".button").on("click", function() {
var $db_value = $('.db_value').val();
var $quantity = $('.quantity_input').val();
var db_valu_fix = 1.8;
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quantity-input");
var oldValue_q = $input.val();
var $db_value = $button.closest('.sp-quantity').find("input.quantity-input-db");
var oldValue_db = $db_value.val();
console.log(oldValue_db);
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue_q) + 1;
newdbVal = parseFloat(oldValue_db) + 1;
//newdbVal.toFixed(2);
}
else {
if (oldValue_q > 0) {
newVal = parseFloat(oldValue_q) - 1;
newdbVal = parseFloat(oldValue_db) - 1;
newdbVal = Math.round(newdbVal * 100) / 100;
} else {
newVal = 1;
}
}
$input.val(newVal);
$db_value.val(newdbVal);
});
// $(".ddd").on("click", function(step) {
// var a=$(".quantity-input").val();
// var attr=$(".quantity-input").attr(step);
// var getValue=a/1;
// console.log(attr);
// });
});
</script>
</body>
</html>

How do I stop a number from going into negative

I have been "writing" a game which involves you collecting a resource, you then spend those resources on something which then creates more of that resource (it will be more interesting when i have finished).
Anyway, my question is that i cannot find a way to stop the number of resources from going into a negative value after buying too much of the thing that creates more resources. I need some way of disabling the button.
I would also like to know how to show the number that is a percentage of the total trees:)
To make it easier, here is the code...
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<script>
function collectSeeds() {
document.getElementById("Seeds").stepUp(1);
}
function plantTree() {
document.getElementById("Seeds").stepDown(10);
document.getElementById("Trees").stepUp(1);
}
function plantTrees10() {
document.getElementById("Seeds").stepDown(100);
document.getElementById("Trees").stepUp(10);
}
</script>
</head>
<body>
<button onclick="collectSeeds()">Collect Seeds</button>
<button type="button" id="plantTree"
onClick="myTimer = setInterval(collectSeeds, 1000); plantTree();">Plant Tree</button>
<button
onClick="plantTrees10(); myTimer = setInterval(collectSeeds,100);">Plant Trees (10)</button>
<p>Seeds
<br/>
<input type="number" id="Seeds" disabled></input>
<p>Trees
<br/>
<input type="number" id="Trees" disabled></input>
<div style="position: fixed; bottom: 0; right: 0;">Progress:</div>
</body>
</html>
add min and max to the field as explained in the documentation
You likely want to give a message somewhere too.
Lastly clear the interval before using it again - I rewrote the script to be unobtrusive and generic.
var myTimer; // make global in scope
function collectSeeds() {
document.getElementById("Seeds").stepUp(1);
}
function plantTree(but) {
var nofSeeds = parseInt(but.getAttribute("data-nofseeds"), 10),
availableSeeds = parseInt(document.getElementById("Seeds").value, 10);
if (availableSeeds < nofSeeds) {
console.log(availableSeeds + " not enough, " + nofSeeds + " needed"); // give some message somewhere
return;
}
console.log(nofSeeds)
document.getElementById("Seeds").stepDown(10 * nofSeeds);
document.getElementById("Trees").stepUp(nofSeeds);
}
window.onload = function() {
var plantButtons = document.querySelectorAll(".plantTree");
for (var i = 0; i < plantButtons.length; i++) {
plantButtons[i].onclick = function() {
clearInterval(myTimer); // only have one timer running
myTimer = setInterval(collectSeeds, 1000);
plantTree(this);
}
}
}
<button onclick="collectSeeds()">Collect Seeds</button>
<button type="button" class="plantTree" data-nofseeds="1">Plant Tree</button>
<button type="button" class="plantTree" data-nofseeds="10">Plant Trees (10)</button>
<p>Seeds
<br/>
<input type="number" min="0" max="1000" id="Seeds" disabled />
</p>
<p>Trees
<br/>
<input type="number" id="Trees" disabled />
</p>
<div style="position: fixed; bottom: 0; right: 0;">Progress:</div>
Just add if it should work just fine...
function plantTree() {
if (document.getElementById("Seeds").value < 10) {
alert("you don't have enough resources")
} else {
document.getElementById("Seeds").stepDown(10);
document.getElementById("Trees").stepUp(1);
}
}
function plantTrees10() {
if (document.getElementById("Seeds").value < 100) {
alert("you don't have enough resources")
} else {
document.getElementById("Seeds").stepDown(100);
document.getElementById("Trees").stepUp(10);
}
}

how to display different function in a same textbox?

I have this html code with javascript. My average value displays correctly but my find minimum is not displaying anything. Its supposed to show when the user clicks on the find min button on the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var calculateGrade = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) ) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("average").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if ( (exam1<exam2) && (exam1<exam3)){
$("mini").value=exam1;}
else if ((exam2<exam1) && (exam2<exam3)){
$("mini").value=exam2;}
else {
$("mini").value=exam3;
}
}
window.onload = function () {
$("calculate").onclick = calculateGrade;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate Average</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="average"disabled ><br>
<label> </label>
<input type="button" id="calculate" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var average = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("result").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
} else {
$("result").value = Math.min(exam1,exam2,exam3);
}
}
window.onload = function () {
$("average").onclick = average;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="result" disabled ><br>
<label> </label>
<input type="button" id="average" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
The issue is with the min function. Instead of setting the value of textbox (probably, missing in your code example) you are setting the value of button "mini" (which is incorrect).
Update:
You need to be including one more textbox <input type="text" id="txtMin" disabled ><br>
and update your min function to set the value of it, as follows:
$("txtMin").value=exam1;
...
$("txtMin").value=exam2;
...
$("txtMin").value=exam3;

Categories