We Keep Coding

Make text appear/disappear on button click [duplicate]

This question already has answers here:
How can I change CSS display none or block property using jQuery?
(15 answers)
Closed 3 years ago.
I'm trying to make the button alternate the text from hidden using 'none' to appear using 'block'. I tried the below but it did not work
<p id='demo' style = 'display: none'>Hello Javascript</p>
<button type='button' onclick="document.getElementById('demo').style.display='block'" >click me</ button>
I want to convert event listener to Javascript and run from there.

Try this, I hope it'll help you out. Thanks
function toggleText() {
var text = document.getElementById("demo");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
<p id='demo' style='display: none'>Hello Javascript</p>
<button type='button' onclick="toggleText()">Click me</button>

css:
.demo {
display: none;
}
html:
<p id='demo' class='demo'>Hello Javascript</p>
<button type='button'> click me </button>
js:
var tag = document.getElementById('demo');
var button = document.querySelector('button');
button.addEventListener('click', function(){
tag.classList.toggle('demo');
});
Running Snippet:
var tag = document.getElementById('demo');
var button = document.querySelector('button');
button.addEventListener('click', function(){
tag.classList.toggle('demo');
});
.demo {
display: none;
}
<p id='demo' class='demo'>Hello Javascript</p>
<button type='button'> click me </button>

Is it helpful:
var showHide = document.getElementById("showHide");
var demo = document.getElementById("demo");
showHide.onclick = function() {
if (demo.style.display == "block") {
demo.style.display = "none";
} else {
demo.style.display = "block";
}
}
<p id='demo' style='display: none'>Hello Javascript</p>
<button id="showHide">Click Me</button>

how to call a nested jquery function from html?

I am calling a addtext() function from html onclick() that is nested inside add() function. I want to call the second function. How can i approach this?
Here i have a link with add() function that shows a textbox and an ADD button with addtext().
The add() function checks for text and if text is present, it generates a new text box.
Now i want the add button to take that text and from the textbox and set it in replacement of the textbox.
clicking the ADD button will take it to addtext() which is inside the add() function.
Html code:
<a id = "newcard" href="#" onclick="add()" >
<b style ="color: #444444">Add Card...</b>
</a>
<div>
<span id = "show-ta"><textarea id="txtarea" style ="
display:none"></textarea><span>
<span id = "newbutton"><button id = "firstbutton" class ="btn btn-
success nbutton"onclick="addtext()" style ="display:none">Add</button>
</span>
</div>
Jquery code:
function add(){
var newTextBoxDiv = $(document.createElement('textarea'));
if ( $('#txtarea').css('display') == 'none' ){
$('#txtarea').css('display', 'block');
}
if ( $('#firstbutton').css('display') == 'none' ){
$('#firstbutton').css('display', 'block');
}
var wrapper = $('#show-ta');
var button = $(document.createElement('button'));
if(wrapper.find('textarea').last().val().length) {
var x =wrapper.find('textarea').last().val();
function addtext()
{
}
wrapper.append('<textarea class="t-one"></textarea>');
wrapper.append('<button class ="btn btn-success
nbutton">Add</button>').appendTo('#cardarea').insertAfter('#cardtitle');;
//button.addClass("btn btn-success");
wrapper.appendTo("#cardarea").insertAfter('#cardtitle');
wrapper.addClass('t-one');
// var text =$('textarea:nth-last-child(2)').val().length;
//wrapper.addClass('nbutton');
}

You have to assign the nested function to a property like this addText.add = add; then you can call that function in onClick event.
function addText()
{
// irrelevant code here
function add(arg){
console.log( arg );
}
addText.add = add;
}
addText();
<button onclick="addText.add('Nested function')">Click me</button>
EDIT:
Updated the snippet as per your code
function add() {
var newTextBoxDiv = $(document.createElement('textarea'));
if ($('#txtarea').css('display') == 'none') {
$('#txtarea').css('display', 'block');
}
if ($('#firstbutton').css('display') == 'none') {
$('#firstbutton').css('display', 'block');
}
var wrapper = $('#show-ta');
var button = $(document.createElement('button'));
if (wrapper.find('textarea').last().val().length) {
var x = wrapper.find('textarea').last().val();
function addtext() {
alert('working');
}
add.addtext = addtext;
wrapper.append('<textarea class="t-one"></textarea>');
wrapper.append('<button class="btn btn-success nbutton ">Add</button>').appendTo('#cardarea').insertAfter('#cardtitle');;
wrapper.appendTo("#cardarea").insertAfter('#cardtitle');
wrapper.addClass('t-one');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a id="newcard" href="#" onclick="add()">
<b style="color: #444444">Add Card...</b>
</a>
<div>
<span id="show-ta">
<textarea id="txtarea" style ="display:none">
</textarea>
</span>
<span id="newbutton">
<button id = "firstbutton" class ="btn btn-success nbutton" onclick="add.addtext()" style="display:none">Add
</button>
</span>
</div>

How to show a div1 div2 div3 div4 div5 using html input button1 button2 button3 button4 button5

I have 5 div tag and 5 html input button also, i want to select/show one div at a time using html input button click.
<script>
$(function () {
// Store our questions in a variable
var $questions = $('.question');
// Show the first question
$questions.first().show();
// When clicking the <button> in ny of the questions...
$questions.find('input').on('click', function () {
// ...store the currently visible question, then...
var $visibleQuestion = $questions.filter(':visible');
// ...if there's a next question....
var $nextQuestion = $visibleQuestion.next('.question');
console.log($nextQuestion);
if ($nextQuestion.length === 1) {
// ...hide the visible question....
$visibleQuestion.hide();
// ..and show the next.
$nextQuestion.show();
}
// If you want, you can check for quiz completition in this else section
else {
// Quiz finished
alert('You finished the quiz!');
}
});
// Optionally, change the text of the last question's button
$questions.last().find('input').text('Finish Quiz');
});
</script>
<script type="text/javascript">
var x, y;
var i = 0;
var j = 0;
for (x = 0; x < 20; x++) {
for (y = 0; y < 5; y = y + 1) {
document.write('<input id="button' + (i + 1) + '" class="btnClass" type="button" value="' + (i + 1) + '" style="width:30px; height:25px;text-align:left;" />');
i++;
document.write('&nbsp &nbsp');
if (i % 5 == 0) {
document.write('<br /> <br />');
}
}
}
</script>

There are 5 divs which are initially hidden and display when clicked on the button.
$(document).ready(function()
{
$("#btn2").click(function()
{
$("#two").removeClass("hidden");
});
});
$(document).ready(function()
{
$("#btn3").click(function()
{
$("#three").removeClass("hidden");
});
});
$(document).ready(function()
{
$("#btn4").click(function()
{
$("#four").removeClass("hidden");
});
});
$(document).ready(function()
{
$("#btn5").click(function()
{
$("#five").removeClass("hidden");
});
});
<body>
<style type="text/css">
.hidden
{
visibility:hidden;
}
</style>
<button id="btn1">DIV 1</button>
<button id="btn2">DIV 2</button>
<button id="btn3">DIV 3</button>
<button id="btn4">DIV 4</button>
<button id="btn5">DIV 5</button>
<div id='one' class="hidden">1 Lorem </div>
<div id="two" class="hidden">2 lorem</div>
<div id="three" class="hidden">3 lorem </div>
<div id="four" class="hidden">4 lorem </div>
<div id="five" class="hidden">5 lorem </div>

Trying to have two side by side buttons that change text when clicked on

I am trying to make two buttons stand side by side
when clicked on one should say "im right" and the other says "no im right!"
<button id="right" type="button">Click Me!</button>
<button id="wrong" type="button">Click Me!</button>
This is my Html.
I am new to Javascript so I am having some trouble putting this together in a function.
document.getElementById("right").addEventListener("click", function(){
alert("I am Right!");
});
document.getElementById("wrong").addEventListener("click", function(){
alert("No,I'm Right!");
});
rather than have an alert I want to have the button's change to that text when clicked on.

<script>
function myFunction(isRight) {
if(isRight) {
alert('It is right button');
} else {
alert('It is left button');
}
}
</script>
<button class="left" onclick="myFunction(false)">Left</button>
<button class="right" onclick="myFunction(true)">Right</button>
You could use something like that for the sample.
But I recommend look to addEventLister and Event Object it will looks good.

function swapText(buttonClicked){
var button1 = document.getElementById('button1');
var btn1Output = document.getElementById('btn1Output');
var btn2Output = document.getElementById('btn2Output');
if (buttonClicked == button1){
btn1Output.innerHTML = "I'm right.";
btn2Output.innerHTML = "No, I'm right.";
} else {
btn1Output.innerHTML = "No, I'm right.";
btn2Output.innerHTML = "I'm right.";
}
}
button, div {
display: inline-block;
width: 45%;
height: 50px;
}
<button onclick="swapText(this)" id="button1">Click</button>
<div id="btn1Output"></div>
<button onclick="swapText(this)" id="button2">Click</button>
<div id="btn2Output"></div>

how do I use the same link to "re-hide" previously hidden text via Javascript?

The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>

Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings

I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>

save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?

<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.