I'm trying to make a game where you enter a number into a textbox and then click on Lock In.
You can then not change your answer.
After that you click on Random Number and it will give you a random number 1-50.
But the problem is that I want to make it where you have to click Lock In before you can find out the random number.
This is because you can just not click Lock In and then change it so that it is right.
My code for this is below:
function numFunction() {
var x = Math.floor((Math.random() * 50) + 1);
document.getElementById("randnum").innerHTML = x;
start.disabled = true;
reload.disabled = true;
}
function btnFunction() {
document.getElementById("answerbox").readOnly = true;
}
function revFunction() {
document.getElementById("rnum").disabled = false;
}
<div id="randbutton">
<button id="rnum" onclick="numFunction()">Random Number</button>
<p id="randnum"></p>
<input type="text" name="answerbox" size="20" id="answerbox">
<div id="lockbtn">
<button onclick="btnFunction();revFunction();">LockIn</button>
<div id="resetbtn"></div>
<button id="relbtn" onclick="relFunction()">Reset</button>
</div>
</div>
You are really close. You can just add "disabled" to your button, and then when the user locks in their answer, enable it again.
Additionally, it's not best practice to split your JavaScript into a bunch of different script tags. Put them all in one place.
function numFunction() {
var x = Math.floor((Math.random() * 50) + 1);
document.getElementById("randnum").innerHTML = x;
start.disabled = true;
reload.disabled = true;
}
function btnFunction() {
document.getElementById("answerbox").readOnly = true;
}
function revFunction() {
document.getElementById("rnum").disabled = false;
}
function relFunction() {
location.reload();
}
<div id="randbutton">
<button id="rnum" onclick="numFunction()" disabled>Random Number</button>
<p id="randnum"></p>
<input type="text" name="answerbox" size="20" id="answerbox">
<div id="lockbtn">
<button onclick="btnFunction();revFunction();">LockIn</button>
<div id="resetbtn"></div>
<button id="relbtn" onclick="relFunction()">Reset</button>
</div>
</div>
you could use the disabled property on the button to start.
<button type="button"id="lock" onclick="enableNum()">Lock in</button>
<button type="button"id="randomNum" disabled>Random Number</button>
Then when someone enters the number, you would have a function that detects the input and enables the button.
function enableNum() {
document.getElementById("randomNum").disabled = false;
}
Related
I'm very new to Javascript and want to build a vending machine for my first Project. I have the problem that I want to make it so that if the right amount is paid, there is an alert saying 'You have paid for your item', but currently it's not working when the display reaches 0. I think it's because the variable amount isn't changed and instead it just displays a different number. How do I get it to actually alert when I have inserted the right amount of 1 cent coins. I tried to google my problem but I don't even know how exactly to describe it.
var item1 = 100;
var ct1 = 1;
function showPrice1()
{
document.getElementById("display").innerHTML = item1;
}
function insert1cent()
{
document.getElementById("display").innerHTML = item1 -= ct1;
}
if (item1 == 0)
{
alert('You have paid for your item');
}
and this is the HTML:
<body>
<div id="display">
</div>
<button id="button1" type="button" onclick="showPrice1()">
1
</button>
<button id="ct1" type="button" onclick="insert1cent()">
1ct
</button>
</body>
Thank you in Advance for your help.
The if statement should be inside your function to check on every click and it should return false to avoid decrementing once your counter reaches 0. As demonstrated in the fiddle.
var item1 = 10;
var ct1 = 1;
function showPrice1() {
document.getElementById("display").innerHTML = item1;
}
function insert1cent() {
if (item1 == 0) {
alert('You have paid for your item');
return false;
}
item1 -= ct1;
document.getElementById("display").innerHTML = item1;
}
<div id="display">
</div>
<button id="button1" type="button" onclick="showPrice1()">
1
</button>
<button id="ct1" type="button" onclick="insert1cent()">
1ct
</button>
I used the code below to increment and decrement an input field by 1. I need to disable the minus (-) button by default. If the initial value is 5, the user should not decrease the value less than 5. If they go to 6, enable the minus button to decrease. But, they should not decrease less than 5.
The code works sometimes. Randomly, the button is disabled and isn’t able to decrease even from 10 to 9, 8, 7.
Please let me know whether this solution will work or need to change any other.
let $noofpaxinput = $('#txtnoofpax');
$noofpaxinput.val(5);
let intialvalue = $noofpaxinput.val();
$('.noofpax').click(function() {
if ($(this).hasClass('increasepax')) {
$noofpaxinput.val(parseInt($noofpaxinput.val()) + 1);
$('.decreasepax').prop('disabled', false);
} else if ($noofpaxinput.val() >= intialvalue) {
let getPaxVal = $noofpaxinput.val(parseInt($noofpaxinput.val()) - 1);
if (getPaxVal <= intialvalue) {
$('.decreasepax').prop('disabled', true);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fee-amount">
<button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
<input id="txtnoofpax" type="text" value="5">
<button type="button" class="noofpax increasepax">+</button>
</div>
You could listen to input change and detect whether to disable the decrease button
Remember to parseInt because your input type is text. If you not parse it, '10' < '5' will return true
let $noofpaxinput = $("#txtnoofpax")
$noofpaxinput.val(5)
let intialvalue = $noofpaxinput.val()
$noofpaxinput.on('change', function () {
if (Number($noofpaxinput.val()) <= Number(intialvalue)) {
$(".decreasepax").prop("disabled", true)
} else {
$(".decreasepax").prop("disabled", false)
}
})
$(".noofpax").click(function () {
if ($(this).hasClass("increasepax")) {
$noofpaxinput.val(Number($noofpaxinput.val()) + 1).trigger("change")
}
if ($(this).hasClass("decreasepax")) {
$noofpaxinput.val(Number($noofpaxinput.val()) - 1).trigger("change")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fee-amount">
<button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
<input id="txtnoofpax" type="text" value="5">
<button type="button" class="noofpax increasepax">+</button>
</div>
You need to check the value of .txtnoofpax inside the click function event to get it everytime the user click.
And then you need to use a else in your last condition.
var noofpaxinput = $('#txtnoofpax'), noofpaxinputInitVal = $(noofpaxinput).val();
$(noofpaxinput).on("input", function(){
checkNoofpaxinput($(noofpaxinput).val(), noofpaxinputInitVal);
});
$('.noofpax').click(function(){
var txtnoofpaxValue = $(noofpaxinput).val();
if ($(this).hasClass('increasepax')){
$(noofpaxinput).val(parseInt(txtnoofpaxValue)+1);
} else if ($(this).hasClass('decreasepax')){
$(noofpaxinput).val(parseInt(txtnoofpaxValue)-1);
}
checkNoofpaxinput($(noofpaxinput).val(), noofpaxinputInitVal);
});
function checkNoofpaxinput(fromValue, Tovalue) {
if (parseInt(fromValue) <= parseInt(Tovalue)) {
$('.decreasepax').prop('disabled', true);
} else {
$('.decreasepax').prop('disabled', false);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="fee-amount">
<button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
<input id="txtnoofpax" type="text" value="5">
<button type="button" class="noofpax increasepax">+</button>
</div>
I have set a reset button to clear a paragraph of a number obtained after a calculation and when I press it and want to restart a calculation again, it displays "NaN" instead of doing the calculation.
HTML
<!--input and paragraph-->
<input type="button" value="Total" class="qantP" onclick="decalcNumber()">
<p class="parafQ" id="numberProd">0</p>
<!--button of resetting-->
<input class="réinit" type="button" value="Remise à Zéro Simulateur" onclick="resetSimul()">
JavaScript
function resetSimul() {
getNumberProd = document.getElementById("numberProd"),
getNumberProd.textContent = "0";
}
function decalcNumber() {
let volume1 = document.getElementById("quantEntrée1").value,
volume2 = document.getElementById("quantEntrée2").value,
inNumber = document.getElementById("numberProd");
inNumber.textContent = parseInt(volume1) + parseInt(volume2)
}
You can do something like this, however, I don't know what's in your decalcNumber() function.
function resetSimul(){
getNumberProd = document.getElementById("numberProd");
getNumberProd.textContent = "0";
}
function decalcNumber(){
let volume1 = parseInt(document.getElementById("quantEntrée1").innerHTML);
let volume2 = parseInt(document.getElementById("quantEntrée2").innerHTML);
inNumber = document.getElementById("numberProd");
inNumber.textContent = volume1 + volume2
}
<input type="button" value="Total" class="qantP" onclick="decalcNumber()"
>
<p class="parafQ" id="numberProd">0</p>
<p class="parafQ" id="quantEntrée1">2</p>
<p class="parafQ" id="quantEntrée2">3</p>
<input class="réinit" type="button" value="Remise à Zéro Simulateur"
onclick="resetSimul()">
I find it! It's because i have do getAmount.value = ""; and we must do getAmount.valueAsNumber = ""; Thank you to everybody!
I want to make an application with 3 questions, each with 2 buttons: yes and no. I want to output a different paragraph in response, depending on whether the answer was true or false (not an alert message!). How do I proceed??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tegne med Javascript</title>
<script>
function oppstart () {
function hs(){
document.getElementById('utskrift').onclick = "riktig";
}
function hu(){
document.getElementById('utskrift').onclick = "feil";
}
function ss(){
document.getElementById('utskrift1').onclick = "riktig";
}
function su(){
document.getElementById('utskrift1').onclick = "feil";
}
function ts(){
document.getElementById('utskrift2').onclick = "riktig";
}
function tu(){
document.getElementById('utskrift2').onclick = "feil";
}
}
</script>
</head>
<body>
jeg har hode
<p id="utskrift"></p>
<button type="submit" id="hs">Sann</button> <button type="submit"
id="hu">USann</button>
<br>
<br>
<p id="utskrift1"></p>
jeg liker Skyrim <button type="submit" id="ss">Sann</button> <button
type="submit" id="su">USann</button>
<br>
<br>
<p id="utskrift2"></p>
jeg heter Tarzan <button type="submit" id="ts">Sann</button> <button
type="submit" id="tu">USann</button>
</body>
Each question's Yes/No buttons will have a click event callback function that will check the answer given and deliver the correct output.
Don't use submit buttons for this since you aren't actually submitting form data anywhere, regular button types will do.
This can be optimized a bit by combining the 3 functions I'm showing below into a single one, but that will complicate the code beyond beginner level, so you may want to stick with this approach for now.
// Get references to all of the buttons
var q1P = document.getElementById("utskrift1");
var q1Sann = document.getElementById("hs");
var q1Usann = document.getElementById("hu");
var q2P = document.getElementById("utskrift2");
var q2Sann = document.getElementById("ss");
var q2Usann = document.getElementById("su");
var q3P = document.getElementById("utskrift3");
var q3Sann = document.getElementById("ts");
var q3Usann = document.getElementById("tu");
// Set up each set of buttons to invoke a validation function when they are clicked
q1Sann.addEventListener("click", q1Validate);
q1Usann.addEventListener("click", q1Validate);
q2Sann.addEventListener("click", q2Validate);
q2Usann.addEventListener("click", q2Validate);
q3Sann.addEventListener("click", q3Validate);
q3Usann.addEventListener("click", q3Validate);
// Validation functions
function q1Validate (evt) {
var message = "";
// Test which button was clicked and populate the appropriate paragraph accordingly
if(evt.target === q1Sann){
message = "Correct!";
} else {
message = "Incorrect!";
}
// Update the paragraph with the message
q1P.textContent = message;
}
function q2Validate (evt) {
var message = "";
// Test which button was clicked and populate the appropriate paragraph accordingly
if(evt.target === q2Sann){
message = "Correct!";
} else {
message = "Incorrect!";
}
q2P.textContent = message;
}
function q3Validate (evt) {
var message = "";
// Test which button was clicked and populate the appropriate paragraph accordingly
if(evt.target === q3Sann){
message = "Correct!";
} else {
message = "Incorrect!";
}
q3P.textContent = message;
}
p { color: blue; }
<div>
jeg har hode
<button type="button" id="hs">Sann</button>
<button type="button" id="hu">USann</button>
<p id="utskrift1"></p>
</div>
<div>
jeg liker Skyrim
<button type="button" id="ss">Sann</button>
<button type="button" id="su">USann</button>
<p id="utskrift2"></p>
</div>
<div>
jeg heter Tarzan
<button type="button" id="ts">Sann</button>
<button type="button" id="tu">USann</button>
<p id="utskrift3"></p>
</div>
I have another question that's been bugging my mind since I started using js fairly recently so that my app would be nicely responsive but I've been hit with another block here.
As the title says I am having serious issues with a particular code.
Here is its summarized form
window.onload = onLoadFunctions;
function onLoadFunctions(){
var show3rdDiv = document.getElementById('show3rdDiv');
var editbtnStart = document.getElementById('editbtnDiv');
var editbtnLog = 0;
editbtnStart.style.display = 'none';
show3rdDiv.onclick = function(){
document.getElementById('3rdDiv')className = "";
if (editbtnLog == 1) {
editbtnStart.style.display = 'block';
}
else {
editbtnStart.style.display = 'none';
}
}
}
function submitclick(){
var uname = document.getElementById("login").elements[0].value;
var upass = document.getElementById("login").elements[1].value;
var preuname = "john";
var preupass = "doe";
if (preuname == uname && preupass == upass) {
editbtnLog = 1;
document.getElementById('2ndDiv')className = "";
alert("The user " + preuname + " was successfully loged in and editbtnLog wass set to: " + editbtnLog);
}
else {
alert("Wrong Username or password!");
}
}
.hidden {
display:none;
}
<div id="login">
<form id="login">
Username<input type"text" placeholder="name">
Passowrd<input type"password" placeholder="password">
<input type="submit" value="Submit" onclick="submitclick()">
</form>
</div>
<div id="2ndDiv" class="hidden">
<input type="button" id="show3rdDiv" value="Continue">
</div>
<div id="3rdDiv" class="hidden">
<div id="editbtnDiv">
<input type="button" id="editbtn" value="Edit"/>
</div>
</div>
No matter what I do that editbtn won't appear or disappear the way an object that requires something should do. And if you noticed i used it's div instead? that's coz it would never appear at all if i just used the input button itself.
Someone please tell me how this is wrong is so many ways?
I tried a lot of styles and I don't really want to use the onclick="" (refer to that Submit button that I hate so much) on my html coz people say it's bad to use it. What should I do here? It got annoying like yesterday already.
Am i missing something? Did I declare this wrong? The furry mermaids i'm loosing precious eyebrow hairs on this project already. <=[
Or maybe i should just stick to the onclick="" thing when it comes to showing that edit btn?
Please Check weather your Script is calling properly or not.Check the line where you define the script.
The "id" attribute is the only
window.onload = onLoadFunctions;
function onLoadFunctions(){
var show3rdDiv = document.getElementById('show3rdDiv');
var editbtnStart = document.getElementById('editbtnDiv');
var editbtnLog = 0;
editbtnStart.style.display = 'none';
show3rdDiv.onclick = function(){
document.getElementById('3rdDiv').className = "";//error
if (editbtnLog == 1) {
editbtnStart.style.display = 'block';
}else {
editbtnStart.style.display = 'none';
}
}
}
function submitclick(){
var uname = document.getElementById("login").elements[0].value;
var upass = document.getElementById("login").elements[1].value;
var preuname = "john";
var preupass = "doe";
if (preuname == uname && preupass == upass) {
editbtnLog = 1;
document.getElementById('2ndDiv').className = "";//error
alert("The user " + preuname + " was successfully loged in and editbtnLog wass set to: " + editbtnLog);
}
else {
alert("Wrong Username or password!");
}
}
<div id="login1">
<form id="login">
Username<input type="text" placeholder="name">
Passowrd<input type="password" placeholder="password">
<input type="button" value="Submit" onclick="submitclick()">
</form>
</div>
<div id="2ndDiv" class="hidden">
<input type="button" id="show3rdDiv" value="Continue">
</div>
<div id="3rdDiv" class="hidden">
<div id="editbtnDiv">
<input type="button" id="editbtn" value="Edit"/>
</div>
</div>
Just a few minutes ago... (note: this is embarrassing!) i figured it out.
(This is not shown in the summarized codes mentioned above)
I made an element that changes its html value like a login button that turns into a logout if you are successfully logged in and changes back if you click it in its logout form so there is a loop. The button's value changes so i experimented a bit and realized that i could tie them together somehow. So i did. By declaring an onclick="" to the show3rdDiv button and a starting class of class="hidden" to editbtnDiv and stating that if the login button has a value of "login" then it keeps the hidden class but if it has a value of logout then it deletes that class.
I'm so stupid sometimes. :/