Simple JQuery show/hide text button - javascript

I'm trying to practice with JQuery, so I made a simple program...or tried to. There is a button that, when clicked, hides the only element on the page. That works fine. But when I click it again, it doesn't bring the paragraph back and change the button text back, as its supposed to. And there any way I can get this to work without using two buttons? Here's what the script looks like right now:
<script>
$(document).ready(function(){
var t;
$("button").click(function(){
if (t === "off") {
$("p").show();
$(this).text("hide text");
}
$("p").hide();
$(this).text("show text");
t = "off";
});
});
</script>

$(document).ready(function(){
var t = "on";
$("button").click(function(){
if (t === "off")
{
$("p").show();
$(this).text("hide text");
t = "on";
}
else
{
$("p").hide();
$(this).text("show text");
t = "off";
}
});
});
Something like that. basically the $("p").hide part always triggers.
Or even easier, use toggle function

That's because you need to put the hide logic in else:
if (t === "off") {
$("p").show();
$(this).text("hide text");
} else {
$("p").hide();
$(this).text("show text");
t = "off";
}
In your code, when you "click it again", although t is off and $("p") is made to shown at beginning, it would be immediately made to hide again.

$(document).ready(function(){
var t;
$("button").click(function(){
if (t === "off")
{
$(this).text("hide text");
t = "";
} else {
$(this).text("show text");
t = "off";
}
$("p").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Click Me!</button>
<p>Paragraph text</p>

There are many answers that have already provided to you, so I'm just going to point out things that I think could be done better.
You need to put the part of the code below in an else statement, otherwise this block of code will execute regardless of the value of t. I suggest you learn more about if-else conditional statement.
$("p").hide();
$(this).text("show text");
t = "off";
$("button").click(function(){ you should use id of the button, i.e. $("#nameOfButtonID").click(function(){. Learn about the id or class attribute in html. id is a unique way identify which button to handle the click event.
t could be treated as boolean.

In your button click function you have to return before the if loop exits and you need to set some other value or undefined to t.
Order of execution:
First click:
t value is "undefined"
if loop wont execute
hide "p"
set button value as 'show text' and t as "off"
Second click:
t value is "off"
if loop will execute
it will show 'p'
change button value to 'hide text'
---- here you should change t's value and return----
As there is no return 'p' will hide
button text will be 'show text' again.
$("button").click(function() {
if (t === "off") {
$("p").show();
$(this).text("hide text");
//add the below code
t = undefined;
return;
}
$("p").hide();
$(this).text("show text");
t = "off";
});

Related

Change and change back text in button jquery

I would like to have a jquery button event where the first time a button is clicked a div (with class .explanation) appears and the text changes and the second time it is clicked the div is hidden and the text changes back to the original text. I can do the first part but the second part does not work. In the below changing - (toggleClass("hidden") - to - .fadeOut... - doesn't work either so I think I have got something wrong with if and else. Thanks in advance
$("button:nth-of-type(1)").click(function() {
if (this.text = "Read Explanation") {
$(".explanation").fadeIn("slow", function() {});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
$(".explanation").toggleClass("hidden");
}
});
change
if(this.text = "Read Explanation") {
to
if($(this).text() === "Read Explanation") {
a demo:
$("button:nth-of-type(1)").click(function() {
if ($(this).text() === "Read Explanation") {
//$(".explanation").fadeIn("slow", function() {});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
}
$(".explanation").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><button>Read Explanation</button></div>
<div class="explanation hidden">explanation</div>
$(this) is jquery object with text() attribute while this is pure js
object without text or text() attribute in this case.
= is assignment operator while === is Comparison operators
There are several issues in your code:
this should be $(this)
text should be text()
You are using assignment operator in if condition. It should be comparison operator == or strict comparison operator ===
You can toggle the hidden class outside if-else block
$( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
}
$(".explanation").toggleClass("hidden");
});
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='explanation hidden'>Some explanation</div>
<button>Read Explanation</button>
you can't make decisions based on data that can change.
if the text of the button changes, you'll need to change your code.
by this way, if the text of the button changes, you need to change your data.
This is not the best option, but it may works.
https://jsfiddle.net/foo8drb2/8/
var data = {
1: "Read Explanation",
2: "Hide Explanation"
}
// asssign default id to the text
var id_text = 1; //1 id for "Read Explanation"
// add data attribute to the button
$("button:nth-of-type(1)").attr("data-id-text", id_text);
// event
$("button:nth-of-type(1)").click(function () {
if ($(this).attr("data-id-text") == 1) {
//change id_text -> 2 for "Hide Explanation"
id_text = 2;
// show hide options
$(".explanation").fadeIn();
} else {
//change id_text -> 1 for "Read Explanation"
id_text = 1;
// show hide options
$(".explanation").fadeOut();
}
// change data id
$(this).attr("data-id-text", id_text);
// update text
$(this).text(data[id_text]);
});
Thanks everyone. This seems to be the simplest / close to what I had. I changed as suggested by Ankit:
this to $(this)
text to text()
= to ==
Using - fade out - instead of - hide - helped
$( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
$(".explanation").fadeIn( "slow", function() {
});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
$(".explanation").fadeOut( "slow", function() {
});
}
});

JavaScript all On/Off button

I have 6 buttons and I wish to create a master button which will turn all the other buttons on or off. I managed to do that but ran into a problem when the master button would turn a button off if it was already on. I need this button to turn all the buttons on or off regardless of its previous state.Button 7 will be acting as master button. Thank you for taking the time to read this, any help would be much appreciated.
//master button
function button7(){
currentvalue = document.getElementById('button7').value;
if(currentvalue == "Off"){
document.getElementById("button7").value="On";
}else{
document.getElementById("button7").value="Off";
}
}
$(document).ready(function(){
$('#button7').on('click', function(){
$('#button7').toggleClass('on');
$('#button1').toggleClass('on');
$('#button2').toggleClass('on');
$('#button3').toggleClass('on');
$('#button4').toggleClass('on');
$('#button5').toggleClass('on');
$('#button6').toggleClass('on');
if(currentvalue == "Off"){
alert("off")
}
else{
alert("on")
}
});
});
//regular button
function button1(){
currentvalue = document.getElementById('button1').value;
if(currentvalue == "Off"){
document.getElementById("button1").value="On";
}else{
document.getElementById("button1").value="Off";
}
}
$(document).ready(function(){
$('#button1').on('click', function(){
$(this).toggleClass('on');
if(currentvalue == "Off"){
alert("off")
}
else{
alert("on")
}
});
});
If you want to set all the buttons to a specific state, don't use toggleClass() which, as the name itself suggests, is used to toggle class-names. Instead:
$('#button7').on('click', function(){
// select all the elements by their id:
$('#button1,#button2,#button3')
// remove both classes:
.removeClass('on off')
// add the class that the clicked-button currently represents:
.addClass(this.value)
// whatever Boolean the button currently represents,
// switch to the other option:
.val(this.value === 'On' ? 'Off' : 'On');
});
References:
addClass().
removeClass().
val().
Toggle the class on the button, the check if it has that class and use that to add or remove the class on all the other buttons. Using a boolean value as the second parameter to toggleClass will add or remove the class according to the boolean, not the presence of the class.
$(document).ready(function(){
$('#button7').on('click', function(){
$('#button7').toggleClass('on');
var currentvalue = $('#button7').hasClass('on');
$('#button1').toggleClass('on', curentvalue);
$('#button2').toggleClass('on', curentvalue);
$('#button3').toggleClass('on', curentvalue);
$('#button4').toggleClass('on', curentvalue);
$('#button5').toggleClass('on', curentvalue);
$('#button6').toggleClass('on', curentvalue);
if (currentvalue){
alert("on")
} else {
alert("off")
}
});
});

Overlay div via jquery is set up successfully but not removed on click

I have one simple jquery script which triggers on click on button and create another div overlays on current html,i got success creating the div but the problem is when i try to close the div by a button which i have created at setting up overlay div is not working what can be the possible cause? the code is as under
input#btn cause the div to diplay and its working fine.
Jquery function file
$(document).ready(function(){
$('input#btn').click(function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'none')
{
$('#div').css('display','block');
$('#div').html('<H1>PALAK MEVADA</H1><input id="close" type="button" value="CLOSE"/>');
}
return false;
});
$('input#close').click(function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
$('#div').css('display','none');
$('#div').html('');
}
return false;
});
});
Use on():
$(document).on('click','input#close',function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
$('#div').css('display','none');
$('#div').html('');
}
return false;
});
The button doesn't exist when your code is first initialized, so your $('input#close').click(); isn't bound to anything.
Try this:
$('input#close').on('click', function(){
// Your code here...
});

get the id attribute from the paragraph which has been right-clicked

Suppose that I have a text with this html markup:
<p id="myId">Some text <span>some other text</span></p>
How can I get the value of the id when I right-click anywhere on the paragraph?
Update:
I'm just passing the value to a function, which I do not mention so as to not complicate it.
write a mousedown handler for p then
$('p').on('mousedown', function(e){
if(e.which== 3){
alert(this.id)
}
})
Demo: Fiddle
Here is the function:
$('#myId').on('mousedown',function(event) {
if(event.which == 3){
var i = $(this).attr('id');
alert(i);
}
});
event.which() reports 1,2,or 3 depending on which button was clicked.
Read here mode details http://api.jquery.com/event.which/
Pure JavaScript version:
var myp = document.getElementsByTagName("p");
for(var i =0;i < myp.length;i++){
myp[i].addEventListener("mousedown",function(e){
if(e.which == 3){
console.log(this.id);
}
},false);
}

jQuery: FadeIn a selected value on click

I have a selected box with 5 values. I'm trying to fadeIn inputs of what is selected in the box. For example: If input1 is selected, fade in input1 on click.
Here is what I'm trying to do:
$(document).ready(function(){
$('.btn').click(function() {
if($("#selectbox").value == 'Input1') {
$(".input1").show();
} else if($("#selectbox").value == 'Input2') {
$(".input2").show();
} else if($("#selectbox").value == 'Input3') {
$(".input3").show();
} else if($("#selectbox").value == 'Input4') {
$(".input4").show();
} else if($("#selectbox").value == 'Input5') {
$(".input5").show();
}
}
});
And here is a NOT working fiddle:
http://jsfiddle.net/rzMHJ/
Your code have two errors and that's why its not working.
$("#selectbox").value should be $("#selectbox").val()
you have not closed your click event with );
Also its much better to use switch case in this example.
Working Demo: http://jsfiddle.net/naveen/Zn2yy/
Update (based on Nick Cravers comment)
For this particular scenario you could simplify code a lot like this.
Demo: http://jsfiddle.net/nick_craver/BWacA/
There are two problems with your code that is causing it to fail.
First, replace .value with the jQuery function val().
Second, add ); to the second to last } at the end.
Here is working refactored code:
$(document).ready(function() {
$('.btn').click(function() {
var show = "." + $("#selectbox").val().toLowerCase();
$(show).fadeIn();
});
});

Categories