Develop Reference

Sudoku project cant assign levels to a button

I stuck around 5 hours on this issue, I am trying to assign multiple levels to a Sudoku grid (one grid for 3 different levels).
But it's not working, no matter what it's giving me the result of the first function, I mean I write code with function for each level I called the levels- Baby, not so hard, nightmare
gave any one of a specific function but only one working, I gave the same function to all of them but its keep choosing the first one no matter what I am doing.
HTML Coding-
<form method="get" action="./bord.html">
<button onclick="baby()" id="level_1" value="1">Baby</button>
</form>
<form method="get" action="./bord.html">
<button onclick="notSoHard()" id= "level_2" type="submit" value="2">Not so
hard
</button>
</form>
<form method="get" action="./bord.html">
<button onclick="nightmare()" id= "level_3" type="submit"
value="3">Nightmare
</button>
</form>
var level =0
function baby(level){
end()
var level = 30
return level
}
function notSoHard(level){
end()
var level = 50
return level
}notSoHard(level)
function nightmare(level){
end()
var level =70
return level
}nightmare(level)
function end(){
// debugger
if (baby(level) == 30){
return 30;
}if(notSoHard(level) == 50){
return 50;
} if(nightmare(level) == 70){
return 70;
}
}
console.log(end())
I need that the result on the console will be what I chose( 30,50,70)
its giving me 30 all over.
God bless you

How about like this:
function end(event) {
event.preventDefault();
const value = parseInt(event.currentTarget.value);
var level = 0;
if(value === 1) {
level = 30;
} else if (value === 2) {
level = 50;
} else if (value === 3) {
level = 70;
};
console.log(level);
//Add anything else you want to do with the level here
return level;
};
<form method="get" action="./bord.html">
<button onclick="end(event)" id="level_1" value="1">Baby</button>
</form>
<form method="get" action="./bord.html">
<button onclick="end(event)" id= "level_2" type="submit" value="2">Not so hard</button>
</form>
<form method="get" action="./bord.html">
<button onclick="end(event)" id= "level_3" type="submit" value="3">Nightmare</button>
</form>
You only really need one function to get the value. Here, the value attribute of the button (1, 2 or 3) is being used to define which level to apply. You could instead pass in an argument to the end function to differentiate between the buttons.
Your code above would get into a stack overflow when I tried it, because the functions were calling each other recursively. It's better to keep it simple :)

Disable a button after three clicks?

I have a button that adds new rows, but I would like it to stop after adding three new rows.
<td>
<input type="button" class="add-move-button" id="add-move-button" value="Add Move" onclick="addRow()">
</td>
How would I go about approaching this? My thinking is I have to somehow count how many times the button was clicked and then send an alert saying "You can't click me anymore". Something like that I hope?

<td>
<input type="button" class="add-move-button" id="add-move-button" value="Add Move" onclick="addRow()">
</td>
<script>
var btnCount = 0;
function addRow() {
btnCount++;
if(btnCount > 3) {
alert("You can't click me anymore");
return;
}
}
</script>

In javascript, you have to initialize a global variable for example
var count = 0;
And when you click the button call to a Javascript method for example
function checkRowCount(){
if(count > 2){
alert("Count is exceeded");
}else{
++count;
}
}
Note : when you going to remove a row make sure you are decreasing the count value by 1 ( --count; )

You can use localstorage to check how many rows are added and then act accordingly.
localStorage.setItem('rows-added', 0);
const addRow = () => {
let current_rows_added = localStorage.getItem('rows-added');
if (localStorage.getItem('rows-added') == 3){
alert("you have already added 3 rows")
}else{
// your code that adds the row
localStorage.setItem('rows-added', current_rows_added + 1);
}
}

I want to add a point when the if statement returns true

How can I add a point every time resu.html() is equal to "its a tie". I tried to write an if statement but it doesn't seem to work.
if(pl1.val() == result){
resu.html('its a tie');
resu.css({'left':'45.3%'});
}
//
if(pl1.val() == 1 && result == 2){
resu.html('Player 1 Wins the game');
resu.css({'left':'37%'});
} // That's how we have to get "its a tie" don't mind it
var resu = $('.result');
function pointCounter(){
var point = 1;
if(resu.html() == "its a tie"){
$('.point').html(point++);
}
}
$('button').click(pointCounter);
<p>You currently have <span class="point">1</span> Point</p>
<p class="result"></p>
<button>START</button>

Yes, you need to define point var outside the function.
<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
}
</script>
<button onclick="buttonClick()">Click Me</button>
<input type="text" id="inc" value="0"></input>

How can I disable an HTML button until another button is clicked?

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;
}

Update a Element's Value On An Interval

I just want a temperature counter, to show in the div "display". The default temp is 7.2, and whenever I submit another temp, it slowly decrements (0,2 per 5 minutes) to that preferred temp. Can you help me out? I am a beginner so please bear with me.
What is wrong with this code?
JavaScript:
var temp = 7.2;
var loop = setInterval(cooler, 300000);
function cooler()
{
document.getElementById("display").innerHTML = temp-0,2;
setInterval(loop);
}
function abortTimer()
{
clearInterval(loop);
}
HTML:
<body>
Current temp <div id="display"> </div> <br>
<form>
Set temp: <input type="text" id="setTemp">
<input type="submit" value="Submit" onClick=cooler();>
</form>
</body>

There was a few things wrong with the code.
You decremented the value of temp but never update the variable. (temp)
By using setInterval you only need invoke it once. Once you clearInterval however you will need to call it again.
I changed the code a bit, updating variable names to something more appropriate. The code could definitely use some more love, but I kept my changes simple so you could follow along.
JavaScript:
var currentTemp = 7.2;
var loop = setInterval(cooler,1000);
function cooler()
{
currentTemp = currentTemp - 0.2;
document.getElementById("display").innerHTML = currentTemp;
}
function setTemp()
{
var input = document.getElementById('setTemp');
currentTemp = parseInt(input.value);
input.value = '';
}
function abortTimer()
{
clearInterval(loop);
}
//Wire click event to the submit button
document.getElementById('submit').addEventListener('click', function()
{
setTemp();
});
HTML:
<body>
Current temp <div id="display">
</div>
<br>
<form>
Set temp: <input type="text" id="setTemp">
<input id="submit" type="button" value="Submit">
</form>
</body>
See the link below for a sample of the code running at 1 second updates.
http://jsbin.com/zibuzuza/1/edit

startChange = function(){
var v,nt,diff,timelapse,decrease,decreaseit,loop;
v = d.value;
nt = t.value;
diff = v-nt;
timelapse = 500; //set to whatever you like
decrease = .2;
decreaseit = function(){
var v = d.value;
if(v>=(nt+decrease)){
loop = setTimeout(function(){
d.value = (v-decrease).toFixed(1);
decreaseit();
},timelapse)
} else clearInterval(loop);
}
decreaseit();
}
s.onclick = startChange;
Using setTimeout to call its parent function if conditions are met, else clearInterval
Using . (numbers with decimals), you're going to run into the whole parseFloat problem. It's hard to work with. Not a stunning example, but the basic framework : http://jsfiddle.net/wYn6J/1/