We Keep Coding

If statements JavaScript, maths will not work in my else statement what am I doing wrong? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
This question is pretty straightforward. I am making a number guessing game and I am now adding an attempts function to my game. Every failed attempt should add 1 to my attempts variable:
var numberwang = Math.floor(Math.random() * 6);
var attempts = 0;
console.log(numberwang);
console.log(attempts);
document.getElementById("guessbutton").onclick = function(e) {
e.preventDefault();
if (document.getElementById("guess").value == numberwang) {
alert("That's numberwang!");
attempts = 0;
console.log("Attempts:",attempts)
} else {
alert("That's not numberwang, try again");
attempts = attempts + 1;
console.log("Attempts:",attempts)
}
}
<p>Guess a number</p>
<form><input type="text" id="guess"><button id="guessbutton">Guess</button></form>
However the else statement argument doesn't work. Each attempt does not add anything to my attempts variable. Can anyone see what is wrong? Thanks in advance.
Note: the else statement is not working for anything mathematical.

You are defining a variable everytime you click.
Removing the "var" from inside the if/else block
<p>Guess a number</p>
<form><input type="text" id="guess"><button id="guessbutton">Guess</button></form>
<script type="text/javascript">
var numberwang = Math.floor(Math.random() * 6);
var attempts = 0;
console.log(numberwang);
console.log(attempts);
document.getElementById("guessbutton").onclick = function(e) {
e.preventDefault();
if (document.getElementById("guess").value == numberwang) {
alert("That's numberwang!");
attempts = 0;
} else {
alert("That's not numberwang, try again");
attempts = attempts + 1;
}
}
</script>

Your problem is that when you use the var keyword, you are making a new variable. You should remove the var inside both the if and the else. This will let you change the outer attempts variable, and not the new one that you define by using the var.
var numberwang = Math.floor(Math.random() * 6);
var attempts = 0;
document.getElementById("guessbutton").onclick = function(e) {
e.preventDefault();
if (document.getElementById("guess").value == numberwang) {
alert("That's numberwang!");
attempts = 0;
} else {
alert("That's not numberwang, try again");
attempts = attempts + 1;
}
console.log("Attempts is: "+attempts);
}
<p>Guess a number</p>
<form><input type="text" id="guess"><button id="guessbutton">Guess</button></form>
I think that I understand what you are having a problem with. You expect what is already logged to the console to change when the variable changes. That's not how console.log works. It only logs the current value of the variable. If you want to see the new value, you should log it again, in this case after each guess is made.

How to repeat the same image a number of times in html? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to repeat an image-"box1" throughout the width of the page. I tried the following but it isn't working.
var count = $(window).width() / $("#box1").width();
for (var i = 1; i <= count; i++) {
var paragraph = document.getElementById("top-section");
paragraph.innerHTML += "<img src='images/box1.png' id='box1'html>";
}
#top-section {
float: left;
}
<div id="top-section"></div>

This one works fine for me.
Check it out...
Just clone element what u need and append it inside the section.
var count = $(window).width() / $(".box1").last().width();
for (var i = 1; i <= count; i++) {
$("#top-section").append($(".box1").last().clone(true));
}
#top-section {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-section">
<img src="images/box1.png" class="box1">
</div>

jQuery keyup event fires only once [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
Why does this jQuery event only fire once?
$(document).on('keyup', '[data-behavior="oneliner-text-area"]', function (event) {
var textLength = $(this).length;
var textLengthLimit = 140;
$('[data-behavior="oneliner-counter"]').html(textLengthLimit - textLength);
if ((textLengthLimit - textLength) < 0) {
$('[data-behavior="oneliner-counter').addClass('oneliner-count-warning');
}
});

You are not counting textfield's text length, you are counting number of elements, and that is it always be 1 so you will always get 139.
$(document).on('keyup', '[data-behavior="oneliner-text-area"]', function (event) {
var textLength = $(this).val().length; // Here is a change
var textLengthLimit = 140;
$('[data-behavior="oneliner-counter"]').html(textLengthLimit - textLength);
if ((textLengthLimit - textLength) < 0) {
$('[data-behavior="oneliner-counter').addClass('oneliner-count-warning');
}
});

I think, this is what you try to do:
$(document).on('ready', function() {
$doc = $(document);
var textProps = {
textLength: 0, // your text length,
textLengthLimit: 140, // your text limit
charsLeft: function() { // check how characters left
return this.textLengthLimit - this.textLength;
},
isLengthValid: function() { // check if text is valid
return this.textLengthLimit - this.textLength > 0;
}
};
$('.txtLimit').text(textProps.charsLeft());
$doc.on('keyup', '[data-behavior="oneliner-text-area"]', function(e) {
var $self = $(this);
textProps.textLength = $self.val().length;
$('.txtLimit').text(textProps.charsLeft());
var success = 'oneliner-count-success',
warning = 'oneliner-count-warning';
if (!textProps.isLengthValid()) {
$self.removeClass(success).addClass(warning);
} else {
$self.removeClass(warning).addClass(success);
}
});
});
.oneliner-count-warning {
color: red !important;
}
.oneliner-count-success {
color: green !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="form-group col-xs-8">
<label for="myInp">Input with validation:</label>
<input type="text" class="form-control" data-behavior="oneliner-text-area" id="myInp">
<small>Characters left: <b class="txtLimit"></b></small>
</div>
</div>

Get a plus score if two conditions are met? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to build a game and I ran into a problem. The idea is to get a score +1 if two conditions are met. I want to get +1 score if a specific random image is shown and a specific button is clicked if both conditions are met the score should increase by one. This is my code so far.
The code does work and increases the score by one if a specific picture is shown but I need the button click with it as well to work properly.
var clicks = 0;
var myPix = ["faces/angry.png", "faces/happy.png", "faces/normal.png","faces /pur.png","faces/sad.png"];
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
if ([randomNum] == 1) {
clicks++;updateClickCount();
}
}
function startTimer() {
setInterval(choosePic, 1000);
}

Some suggestions:
Add a global variable myPicture which holds the index of the actual image. Change the variable randomNum to myPicture in the function choosePic. Delete in the function the condition.
Add some buttons with an event onclick and an appropriate function to handle the click.
<button onclick="clicked(0);">angry</button>
Add the function for the click event.
function clicked(index) {
// this checks the actual picture index with the index of the button
if (myPicture === index) {
clicks++;
updateClickCount();
}
}
Add the function for the display of the count of the clicks
function updateClickCount() {
document.getElementById('count').innerHTML = clicks;
}
Start the interval
startTimer();
Here the working code without images:
var clicks = 0,
myPix = ["faces/angry.png", "faces/happy.png", "faces/normal.png", "faces /pur.png", "faces/sad.png"],
myPicture;
function choosePic() {
myPicture = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[myPicture];
// only to the see the picture name
document.getElementById("myPicture").alt = myPix[myPicture];
}
function startTimer() {
setInterval(choosePic, 1000);
}
function clicked(index) {
if (myPicture === index) {
clicks++;
updateClickCount();
}
}
function updateClickCount() {
document.getElementById('count').innerHTML = clicks;
}
startTimer();
<img id="myPicture" width="100" height="50"/><br />
<button onclick="clicked(0);">angry</button>
<button onclick="clicked(1);">happy</button>
<button onclick="clicked(2);">normal</button>
<button onclick="clicked(3);">pur</button>
<button onclick="clicked(4);">sad</button><br />
Count: <span id="count">0</span>

If a checkbox is checked or unchecked - code optimization - jquery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
So I have a jquery "checkbox checked/unchecked" function working well. This is a checkbox for turning on or off a particular URL parameter - BUT I believe this code could be written a lot tighter. Does anyone have any suggestions?
$('#mapControl').live('click', function(){
var thisUrl = $(location).attr('href');
if($(this).is(':checked')) {
var lastFour = thisUrl.substr(thisUrl.length - 4);
var param;
if (lastFour == 'com/') {param='?mapControl=true'} else {param='&mapControl=true'}
thisUrl=thisUrl+param;
} else {
$('#urlParam').val(thisUrl);
if (thisUrl.indexOf('?mapControl=true') >= 0){
thisUrl=thisUrl.replace('?mapControl=true','');
} else if (thisUrl.indexOf('&mapControl=true') >= 0){
thisUrl=thisUrl.replace('&mapControl=true','');
}
}
$('#urlParam').val(thisUrl);
});

Try to avoid jQuery as much as you can for example
$('#mapControl').live('click', function(){
// you can directly read window location href attribute
var thisUrl = window.location.href;
var urlParamObj = $('#urlParam');
// instead of $(this).is(':checked') YOU can write *this.checked === true*
if(this.checked === true) {
var lastFour = thisUrl.substr(thisUrl.length - 4);
var param;
if (lastFour == 'com/') {param='?mapControl=true'} else {param='&mapControl=true'}
thisUrl=thisUrl+param;
} else {
urlParamObj.val(thisUrl);
/* if you are sure that your location may have "?mapControl=true" OR "&mapControl=true"you don't have to write code to check string directly replace
*/
thisUrl=thisUrl.replace('?mapControl=true','');
thisUrl=thisUrl.replace('&mapControl=true','');
}
// you don't have to write $('#urlParam') 2 times create a object and refer it again and again
urlParamObj.val(thisUrl);
});