We Keep Coding

Jquery/Javascript: Button disappears after being clicked

I've made a JSFiddle of a small mock game I'm making (https://jsfiddle.net/uw2k9ba6/1/).
Here is my Javascript for reference:
$(document).ready(function () {
//charmander
var charmander = {
hp: 140
};
console.log(charmander.hp);
document.getElementById('charnum').innerHTML = (charmander.hp);
//bulbasaur
var bulbasaur = {
hp: 180
}
document.getElementById('bulbnum').innerHTML = (bulbasaur.hp);
//squirtle
var squirtle = {
hp: 160
}
document.getElementById('squirnum').innerHTML = (squirtle.hp);
let found = false;
let charPick = false;
let bulbPick = false;
let squirPick = false;
var startGame = false;
var fighters = [];
var ids = [];
//select pokemon - WORKING
function selector() {
$("#charbut").click(function () {
if (found === false) {
found = true;
bulbPick = true;
squirPick = true;
$('#bulbasaur').animate({ right: '-=600px' });
$("#bulbasaur").css({ backgroundColor: "grey" });
$('#squirtle').animate({ right: '-=600px' });
$("#squirtle").css({ backgroundColor: "grey" });
$('#charmander').animate({ bottom: '-=300px' });
$("#charmander").css({ backgroundColor: "#85C1E9" });
var input = this;
input.disabled = true;
fighters.push(charmander.hp);
ids.push($('#charnum'));
console.log(ids);
}
})
$("#bulbut").click(function () {
if (found === false) {
found = true;
charPick = true;
squirPick = true;
$('#charmander').animate({ right: '-=600px' });
$("#charmander").css({ backgroundColor: "grey" });
$('#squirtle').animate({ right: '-=600px' });
$("#squirtle").css({ backgroundColor: "grey" });
$('#bulbasaur').animate({ bottom: '-=300px', left: '-=160px' });
$("#bulbasaur").css({ backgroundColor: "#85C1E9" });
var input = this;
input.disabled = true;
fighters.push(bulbasaur.hp)
ids.push($('#bulbnum'));
}
})
$("#squirbut").click(function () {
if (found === false) {
found = true;
charPick = true;
bulbPick = true;
$('#charmander').animate({ right: '-=600px' });
$("#charmander").css({ backgroundColor: "grey" });
$('#bulbasaur').animate({ right: '-=600px' });
$("#bulbasaur").css({ backgroundColor: "grey" });
$('#squirtle').animate({ bottom: '-=300px', left: '-=300px' });
$("#squirtle").css({ backgroundColor: "#85C1E9" });
var input = this;
input.disabled = true;
fighters.push(squirtle.hp)
ids.push($('#squirnum'));
};
});
};
console.log(fighters);
selector();
//select enemy - WORKING
function enemy() {
$("#bulbut").click(function () {
if (bulbPick === true) {
$('#bulbasaur').animate({ right: '-=100px', bottom: '-=100px' });
$("#bulbasaur").css({ backgroundColor: "#F1948A" });
var input = this;
input.disabled = true;
startGame = true;
gameStart();
fighters.push(bulbasaur.hp);
ids.push($('#bulbnum'));
}
});
$("#charbut").click(function () {
if (charPick === true) {
$('#charmander').animate({ right: '-=100px', bottom: '-=100px' });
$("#charmander").css({ backgroundColor: "#F1948A" });
var input = this;
input.disabled = true;
startGame = true;
gameStart();
fighters.push(charmander.hp);
ids.push($('#charnum'));
}
});
$("#squirbut").click(function () {
if (squirPick === true) {
$('#squirtle').animate({ right: '-=100px', bottom: '-=100px' });
$("#squirtle").css({ backgroundColor: "#F1948A" });
var input = this;
input.disabled = true;
startGame = true;
gameStart();
fighters.push(squirtle.hp);
ids.push($('#squirnum'));
}
});
console.log(startGame);
}
enemy();
//start game
function gameStart() {
if (startGame === true) {
//attack button
var button = $('<button/>', {
text: 'Attack!',
click: function () {
var pdamage = Math.floor (Math.random() * 8);
var edamage = Math.floor (Math.random() * 10);
var ptotals = parseInt(fighters[0] - pdamage);
var etotals = parseInt(fighters[1] - edamage);
fighters[0] = ptotals;
ids[0].html = ptotals;
//change player hp visually - WORKING
ids[0].text(ptotals);
//change enemy hp - Working
fighters[1] = etotals;
ids[1].html = etotals;
ids[1].text(etotals);
$('#textbox').text("You dealt " + edamage + " damage! " + "You got attacked for " + pdamage + " damage");
//console.log(ids[0]);
//console.log(ids[1]);
//console.log(fighters[1]);
//console.log(ptotals);
//console.log(pdamage);
if (fighters[1] <= 0 || fighters[1]===0){
winneR();
fighters[1].toString;
fighters[1].html = "faint";
this.disabled=true;
}else if (fighters[0] <= 0){
loseR();
this.disabled=true;
}
}
})
$('#atkButton').append(button);
}
}
//win function
function winneR(){
var msg = "Congratulations! You Won!";
$('#end').append(msg);
}
function loseR(){
var texts = "Your Pokemon fainted!, Healing all Pokemon in 10 seconds!"
$('#end').append(texts);
}
});
The problem I am having is that the attack button which appears after 2 characters have been chosen disappears after I've clicked on it once. I want the button to be up there until the HP of either characters = 0. I'm not sure about how to approach this, any help is appreciated!
p.s. please excuse my poor code work, i've only been doing javascript for a few days.
p.p.s you might want to enlarge the window after you run it.

your problem is when you are adding $('#textbox').text("You dealt " + edamage + " damage! " + "You got attacked for " + pdamage + " damage");
Since your html structure is:
<div id = "textbox">
<div id="atbox">
<div id="atkButton" class="active">
</div>
</div>
</div>
Which means that when you use .text() it replaces whats inside the div with the text so in your case it removes the div #atkButton where you added the button.
So a simple solution would be simply change the html structure and remove the button from the textbox div and you'll be fine.
<div id = "textbox">
</div>
<div id="atbox">
<div id="atkButton" class="active">
</div>
</div>
Here is a working example: https://jsfiddle.net/7q35umvb/2/

Javascript function not firing and console not offering any insight

Anyone know what is wrong with this code JS code? The function does not fire and console isn't offering any insight. This was working in the click function with minor changes but not in its own function.
//History Chart
$expanded = true;
var $parent;
function graphShowHide(parent) {
$parent = parent;
if ($expanded) {
$('#ExpandedGraphRow').hide("fast", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '415px');
$(parent).find('#ExpandedGraphRow').css({
position: 'relative',
bottom: '0'
});
$(parent).find('.animation-wrapper').animate({
height: '397px'},
200, function() {
});
}
setTimeout(function($) {
$(parent).find('.history-bar-wrapper').width('100%');
}, 200);
$(parent).find('h4 img').hide('fast');
$(parent).find('h4 span').width('100%').css('float', 'none');
$expanded = false;
$(this).text('show history');
} else {
var currentWidth = $(parent).find('h4').width();
var nthChild = $(parent).index();
if($('body').innerWidth() > 982 && nthChild == 2) {
$('.nbs-flexisel-nav-right').trigger('click');
} else if($('body').innerWidth() < 983 && nthChild == 1) {
$('.nbs-flexisel-nav-right').trigger('click');
}
$(parent).find('h4 span, .history-bar-wrapper').width(currentWidth);
$(parent).find('h4 span').css('float', 'left');
$(parent).find('h4 img').show('slow');
$('#ExpandedGraphRow').show("slow", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '748px');
$(parent).find('#ExpandedGraphRow').css({
position: 'absolute',
bottom: '66px'
});
$(parent).find('.animation-wrapper').animate({
height: '729px'},
200, function() {
});
}
$(this).text('hide history');
$expanded = true;
}
}
$('.history-button').click(graphShowHide('.BMI'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Try this:
$('.history-button').click(function() {
graphShowHide('.BMI');
});

You are calling the function, not binding it to the click. Wrap the call in another function for it to work correctly:
$('.history-button').click(function() {
graphShowHide('.BMI');
});
http://learn.jquery.com/javascript-101/functions/

You have to change this line:
$('.history-button').click(graphShowHide('.BMI'));
By this one:
$('.history-button').click(function() { graphShowHide('.BMI') });

jQuery - Click function doesn't fire

I'm having problems with firing of a function whenever my ID is clicked. Currently, this is how my code looks:
$(document).ready(function () {
if (self != top) {
top.location.replace(location.href);
}
$(document).mousedown(function (e) {
if (e.button == 2) {
console.log('mousdown');
$(window).blur();
}
});
$(document).mouseup(function (e) {
if (e.button == 2) {
console.log('mousup');
$(window).blur();
}
});
var $iframe_height = $(window).innerHeight() - 90;
$('iframe').attr('height', $iframe_height + 'px');
$(window).resize(function () {
var $iframe_height = $(window).innerHeight() - 90;
$('iframe').attr('height', $iframe_height + 'px');
});
$('.message').html('<div class="alert alert-warning">Waiting for advertisement to load...</div>');
$('.close').on('click', function () {
window.open('', '_self', '');
window.close();
});
var $seconds = 5;
var $window_width = $(window).innerWidth();
var $width_per_second = $window_width / $seconds;
var $timer = null,
$current_second = 0;
setTimeout(function () {
if ((!$('body').hasClass('done')) && (!$('body').hasClass('blocked')) && (!$('body').hasClass('ready'))) {
$('body').addClass('ready');
$('.message').html('<div class="alert alert-info">Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to start viewing this advertisement.</div>');
}
}, 3000);
document.getElementById("website").onload = function () {
if ((!$('body').hasClass('done')) && (!$('body').hasClass('blocked')) && (!$('body').hasClass('ready'))) {
$('body').addClass('ready');
$('.message').html('<div class="alert alert-info">Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to start viewing this advertisement.</div>');
}
};
$("#start").click(function () {
$('#website').focus();
$('.message').html('<div class="alert alert-info"><b id="seconds">' + parseFloat($seconds - $current_second) + '</b> seconds remaining (do not leave this page).</div>');
if ($timer !== null) return;
$timer = setInterval(function () {
if ($current_second == $seconds) {
clearInterval($timer);
$('.message').html('<div class="alert alert-success">Checking if you won, please wait…</div>');
var $id = 10977;
var $reffbux_fp = new Fingerprint();
var $reffbux_fp = $reffbux_fp.get();
$.ajax({
url: 'http://reffbux.com/account/register_roulette',
type: 'post',
data: {
id: $id,
fp: $reffbux_fp
},
success: function (result, status) {
$('html, body').animate({
scrollTop: 0
}, 500);
$('body').addClass('done');
$('.melding').fadeOut(0).fadeIn(500);
$('.message').html(result);
$('.counter_bar').addClass('done');
}
});
return false;
} else {
var $counter_bar_width = $('.counter_bar').innerWidth();
$('.counter_bar').css('width', parseFloat($counter_bar_width + $width_per_second).toFixed(2));
$current_second++;
$("#seconds").text(parseFloat($seconds - $current_second));
}
}, 1000);
});
$('body').mouseleave(function () {
if ((!$(this).hasClass('done')) && (!$(this).hasClass('blocked')) && ($(this).hasClass('ready'))) {
$('.message').html('<div class="alert alert-error">You navigated away from the advertisement. Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to resume.</div>');
clearInterval($timer);
$timer = null
}
});
});
A text with id="start" will be generated when the iframes content is loaded. The problem is, whenever I click on the id="start" nothing happens. Nothing. The console log doesn't report any error before I click nor does it report any error after I've clicked.
I can't seem to find what the problem is.

You have to use the jquery on to bind events to dynamically created elements.
$('.message').on('click', '#start', function(){
Where .message is the elelment your #start element is in.

Js and Divs, (even <div> is difference)

I Have find a javascript code that works perfectly for showing a DIV.
but this code works only for showing one div for each page.
i want to include many DIVS for hiding and showing in the same page.
I was try to replace the div id and show/hide span id with a rundom php number for each include, but still is not working.
so how i have to do it?
the JS code:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};

Check out the Fiddle, you can edit code based on your needs ;)
$(function() {
$('.sub-nav li a').each(function() {
$(this).click(function() {
var category = $(this).data('cat');
$('.'+category).addClass('active').siblings('div').removeClass('active');
});
});
});

finaly i found my self:
<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>
js
$('.showhide').click(function(e) {
$(this).next().slideToggle();
e.preventDefault(); // Stop navigation
});
$('div').hide();
Am just posting this in case someone was trying to answer.

stellar.js - configuring offsets / aligning elements for a vertical scrolling website?

I have found, and am trying to use, a plugin called stellar.js. Primarily it is for creating a parallax effect for websites, but, I am not after this effect - I am after the other effect it offers:
Stellar.js' most powerful feature is the way it aligns elements.
All elements will return to their original positioning when their
offset parent meets the edge of the screen—plus or minus your own
optional offset.
An example of the offset positioning: http://markdalgleish.com/projects/stellar.js/#show-offsets . When you scroll over a div it snaps/realigns to the edge of the browser. I am trying to get this to work for a vertical website.
I am not having much luck - due to my novice knowledge of Javascript and jQuery. I thought it would just be a case of swapping around the horizontals to verticals.
Has anyone played with this plugin before, or used it for a similar scenario, and got any tips?
The jsFiddle with all the code: http://jsfiddle.net/2SH2T/
And the Javascript code:
var STELLARJS = {
init: function() {
var self = this;
$(function(){
self.$sections = $('div.section').each(function(index){
$(this).data('sectionIndex', index);
});
self.highlightSyntax();
self.handleEvents();
self.debugOffsets.init();
self.debugOffsetParents.init();
self.initParallax();
});
},
initParallax: function() {
var isHomePage = $('body').hasClass('home'),
$main = $('div.main');
if (isHomePage) {
$main.height($main.height() + $(window).height() - 1000);
}
if ($.browser.msie) {
$('body').removeAttr('data-stellar-background-ratio').append('<div class="ie-bg" />');
}
$(window).stellar({
horizontalOffset: !isHomePage,
verticalScrolling: 40
});
},
highlightSyntax: function() {
$('pre').addClass('prettyprint');
if (window.prettyPrint !== undefined) prettyPrint();
},
handleEvents: function() {
var self = this,
//Debounce function from Underscore.js
debounce = function(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
},
handleScroll = function() {
var scrollTop = $(window).scrollTop(),
sectionIndex = Math.round((scrollTop - 40) / self.$sections.first().outerHeight()),
$activeSection = self.$sections.eq(sectionIndex);
if ($activeSection.length === 0) {
$activeSection = self.$sections.last();
}
if ($activeSection.length === 0) return;
$(window).unbind('scroll.stellarsite');
if (scrollLeft === 0) {
$(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
} else {
$('html,body').animate({
scrollLeft: $activeSection.offset().left - 40
}, 600, 'easeInOutExpo', function() {
setTimeout(function(){
$(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
}, 10);
});
}
$(window).bind('mousewheel', function(){
$('html,body').stop(true, true);
});
$(document).bind('keydown', function(e){
var key = e.which;
if (key === 37 || key === 39) {
$('html,body').stop(true, true);
}
});
};
if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
$(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
}
},
debugOffsets: {
init: function() {
this.$debug = $('#debugOffsets');
if (window.location.href.indexOf('#show-offsets') > -1) {
this.show();
}
},
show: function() {
this.$debug.fadeIn();
$('body').addClass('debugOffsets');
$('h2').append('<div class="debug-h2-label">Offset Parent (All parallax elements align when this meets the offsets)</div>');
},
hide: function() {
this.debug.fadeOut;
$('body').removeClass('debugOffsets');
}
},
debugOffsetParents: {
init: function() {
this.$debug = $('#debugOffsets');
if (window.location.href.indexOf('#show-offset-parents-default') > -1) {
this.removeOffsetParents();
}
if (window.location.href.indexOf('#show-offset-parents') > -1) {
this.show();
}
},
show: function() {
this.$debug.fadeIn();
$('body').addClass('debugOffsetParents');
$('h2').append('<div class="debug-h2-label">New Offset Parent (All parallax elements align when this meets the offsets)</div>');
$('h2').each(function(){
$(this).find('div.constellation:last').append('<div class="debug-constellation-label">Default Offset Parents</div>');
});
$('body').addClass('debug');
},
removeOffsetParents: function() {
$('body').addClass('debugOffsetParentsDefault');
$('h2[data-stellar-offset-parent]').removeAttr('data-stellar-offset-parent');
}
}
};
STELLARJS.init();

After searching for a good solution for a while, I found this jQuery plugin- Snappoint!
https://github.com/robspangler/jquery-snappoint

I modified the original code and came up with exact effect like in stellarjs.com. Instead it's vertical :)
Take a look: http://jsfiddle.net/E4uVD/38/

I think I have achieved what you are describing with the code below. Here is a JsFiddle: http://jsfiddle.net/E4uVD/7/
JQuery:
$(function(){
var _top = $(window).scrollTop();
var individualDivHeight = 300;
$(window).mousedown(function() {
$('html, body').stop();
});
$(window).mouseup(function(){
var _cur_top = $(window).scrollTop();
var totalHeight = $('#container').height();
var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;
$('html, body').stop().animate({scrollTop: posToScroll}, 2000);
});
});
HTML:
<div id="container">
<div class="box">300px</div>
<div class="box">300px</div>
<div class="box">300px</div>
<div class="box">300px</div>
<div class="box">300px</div>
<div class="box">300px</div>
<div class="box">300px</div>
<div class="box">300px</div>
<div class="box">300px</div>
<div class="box">300px</div>
</div>
CSS:
body {
height:2000px;
}
.box
{
color: #fff;
height: 300px;
width: 300px;
border: 1px solid white;
}
#container {
height:3000px;
width:300px;
background-color:blue;
}