My issue seems like it would be on here already but I just can't find it. Apologies in advance!!!!
After clicking one of multiple (unique) buttons, the initial corresponding div selected keeps executing even when clicking a different button.
How can I stop the first clicked button from executing the same code?
HTML
<button id="freeButton" type="button">Redeem</button>
<button id="giftCardButton" type="button">Redeem</button>
Jquery
content[0] = content;
content[1] = other content;
$(freeButton).click(function(){
if(!visible) {
$('#items').append(content[0]);
visible = true;
} else {
$('#items').remove(content[0]);
visible = false;
}
});
$(giftCardButton).click(function(){
if(!visible) {
$('#items').append(content[1]);
visible = true;
} else {
$('#items').remove(content[1]);
visible = false;
}
});
With this line $('#items').remove(content[1]); you are removing the element from the dom and with append you are not replacing the content of the div, you're just adding to it.
you need to use the html() methode instead.
var content = ["content", "other content"];
visible = false;
$('#freeButton').click(function(){
if(!visible) {
$('#items').html(content[0]);
visible = true;
} else {
$('#items').html("");
visible = false;
}
});
$('#giftCardButton').click(function(){
if(!visible) {
$('#items').html(content[1]);
visible = true;
} else {
$('#items').html("");
visible = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="freeButton" type="button">Redeem1</button>
<button id="giftCardButton" type="button">Redeem2</button>
<div id="items"></div>
Related
I need help with this function. Clicking a button, the onkeyup event present in the body tag must be deactivated, and then pressing it again must reactivate
<body onkeyup="NoPreview()">
...
</body>
function NoPreview() {
var preview = true;
if (preview == true) {
document.body.onkeyup = null;
preview = false;
} else {
return true; }
}
the function was deactivated, but clicking again on the button, does not reactivate.
You can keep a global variable and store the status of your setting, like this
<body onkeyup="NoPreview()">
<button onClick="toggleKeyup()">Toggle</button>
</body>
and the js:
var enableKeyup = true;
function toggleKeyup() {
enableKeyup = !enableKeyup;
}
function NoPreview() {
if(enableKeyup) {
// Your code here...
document.body.appendChild(document.createTextNode("."));
}
}
this way you don't have to add and remove events and you can have more settings for your NoPreview function.
Here's a pen: https://codepen.io/wyzix33/pen/bXBPbz
Hope it helps :)
Happy codding!
So I have a few div tags that I have currently hidden, and I want to display them one after the other by hitting the enter key.
What I want to happen: I hit enter and the first div tag is revealed, and then I hit enter a second time to see the second div tag.
What is happening instead: I hit enter once and both div tags show up.
In this case, the first div tag I want to reveal is "intro", and the second is "body". I am running this website on jsbin, and I am using chrome, if that helps.
This is my JavaScript:
//***********************************************************
// BODY MODULE
var bodyController = (function(){
var enterBool;
var reveal = function(){
if(enterBool){
document.getElementById("evidence").style.display = "block";
enterBool = false;
}
};
var enterListen = function(){
document.addEventListener("keydown", function(event){
if(event.keyCode === 13){
document.addEventListener("keyup", function(event){
if(event.keyCode === 13){
enterBool = true;
reveal();
}
});
}
});
};
return{
enterBoolBody: enterBool,
enterListenBody: function(){
enterListen();
}
}
})();
//***********************************************************
// INTRO MODULE
var introController = (function(){
var enterBool;
var reveal = function(){
if(enterBool){
document.getElementById("body").style.display = "block";
enterBool = false;
}
};
var enterListen = function(){
document.addEventListener("keydown", function(event){
if(event.keyCode === 13){
document.addEventListener("keyup", function(event){
if(event.keyCode === 13){
enterBool = true;
reveal();
}
});
}
});
};
return{
enterBoolIntro: enterBool,
enterListenIntro: function(){
enterListen();
}
}
})();
//***********************************************************
// CONTROL MODULE
var controller = (function(introCtrl, bodyCtrl, evidenceCtrl, infoCtrl,
conclusionCtrl){
var eventListeners = function(){
introCtrl.enterListenIntro();
bodyCtrl.enterListenBody();
};
return{
init: function(){
eventListeners();
}
}
})(introController, bodyController, evidenceController,
infoController, conclusionController);
//***********************************************************
controller.init();
I think you might be over engineering this a bit. All you need is an event listener to check for enter. Then you check if the first div is shown, if not show it. If the first div is shown check if the second div is shown and show it.
Quick note, no IE9 support for classList if that's important to you.
https://caniuse.com/#feat=classlist
(function(window, document, undefined)
{
document.addEventListener('keyup', showDivs, false);
})(window, window.document);
function showDivs(event)
{
event = event || window.event;
var divsToShow = document.getElementsByClassName("Display-Div");
for (var i = 0; i < divsToShow.length; i++) {
if (!divsToShow[i].classList.contains("Block")) {
divsToShow[i].classList.add("Block");
break;
}
}
}
.Hidden {
display: none;
}
.Block {
display: block;
}
<div class="Hidden Display-Div">This</div>
<div class="Hidden Display-Div">Now</div>
<div class="Hidden Display-Div">Works</div>
<div class="Hidden Display-Div">With</div>
<div class="Hidden Display-Div">Any</div>
<div class="Hidden Display-Div">Div</div>
<div class="Hidden Display-Div">With</div>
<div class="Hidden Display-Div">Class</div>
<div class="Hidden Display-Div">Display-Div</div>
You can put the ids of your divs in an array, or you could assign a common class to all divs that you want to appear one by one. Assuming the first, this code simply grabs the id of the next div to display from the array and increments the counter. You could add more divs to the array and it would work.
var divs = ["evidence", "body"];
var counter = 0;
document.addEventListener("keyup", function(event){
if(counter < divs.length && event.keyCode == 13){
document.getElementById(divs[counter]).style.display = 'block';
counter++;
}
});
I am trying make speed units toggle when clicking. However, this only works once. I have run out of things to try. I also tried .click(), .live(), .toggle() (which only made it disappear and reappear), etc.
HTML:
<li id="wind">Wind speed</br>
<p class='windSpeedKm'></p>
</li>
Javascript:
var click = true;
$('#wind').on('click', function() {
if (click = false) {
$('#wind').html(function() {
$(this).html("Wind speed<br>" + windKm);
click = true;
});
} else if (click = true) {
$('#wind').html(function() {
$(this).html("Wind speed<br>" + windMi);
click = false;
});
}
});
This isn't exactly what you asked for, but this will save you so much time it is unbelievable. It has an auto convert function built in so you don't have to manually update both numbers. It doesn't replace unnecessary to replace html.
<li id="wind">Wind speed</br>
<p class='windSpeedKm' km="500">500</p>
</li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function toMiles(km) {
return parseFloat(km) * 0.62137;
}
$('#wind').on('click', function() {
console.log($(this).attr("km"));
windSpeedKm = $(this).find(".windSpeedKm");
km = windSpeedKm.attr("km");
if (km === windSpeedKm.html()) {
windSpeedKm.html(toMiles(km));
} else {
windSpeedKm.html(km);
}
});
</script>
There are a few syntax issues with the code:
var click = true;
$('#wind').on('click', function() {
if (click) {
$(this).html("Wind speed<br>" + windKm):
click = true;
} else {
$(this).html("Wind speed<br>" + windMi);
click = false;
}
});
Note: there isn't any need to set click = true or click = false in your example as falling into the if statement by checking the click assignment value, this will already be true! You would only do this if you wanted to toggle the boolean to false after confirming it was true.
click = true should be click == true;
So I have some HTML code here:
<body>
<b style="font-size: 26px;">How the game works</b>
<u id="HowToPlay_HideShow" style="color: #9FF;">[hide]</u><br>
</body>
And I also used Javascript to turn the hide text into show, and show back into hide when clicked on.
<script>
var HowGameWorks_Hidden = false;
document.getElementById("HowToPlay_HideShow").onclick = function () {
if (HowGameWorks_Hidden == false) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[show]";
HowGameWorks_Hidden = true;
}
if (HowGameWorks_Hidden == true) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
HowGameWorks_Hidden = false;
}
}
</script>
This, however, does not seem to work. Clicking on the hide and show text has no effect at all. So I tried removing this piece of code:
if(HowGameWorks_Hidden == true) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
HowGameWorks_Hidden = false;
}
And it correctly turns the hide text into show when I click it (but, of course, does not turn the show text back into hide).
So how do I get my code working?
This is because your second if statement will always get triggered if your first one does, since you set HowGameWorks_Hidden to true in it. You need to use an else:
if(HowGameWorks_Hidden == false) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[show]";
HowGameWorks_Hidden = true;
}
else if(HowGameWorks_Hidden == true) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
HowGameWorks_Hidden = false;
}
There's this div in a site:
<div class="section1">
....
</div>
I want to remove it using a Chrome extension... Can someone give only the javascript code alone? Thanks.
function removeElementsByClassName(names) {
var els = document.getElementsByClassName(names),
i, element;
for (i = els.count - 1; i > 0; i -= 1) {
element = els[i];
element.parentElement.removeChild(element);
}
}
removeElementsByClassName('section1');
function removeElement(parentDiv, childDiv){
if (childDiv == parentDiv) {
alert("The parent div cannot be removed.");
}
else if (document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
}
else {
alert("Child div has already been removed or does not exist.");
return false;
}
}
removeElement('parent','child');
If by removing you simply mean hiding then you can run this from a content script:
document.querySelector('div.section1').style.display = 'none';
(this assumes there is only 1 section1 element on the page, otherwise you would need to use document.querySelectorAll and filter the results based on some criteria)