Is there a way to hide a button with .innerHTML?
I tried the following code but it did not work:
function F1() {
bL1 = document.getElementById("bL1").innerHTML = '<body class="hidden">';
ebL1 = document.getElementById("ebL1").innerHTML = '</body>';
}
.hidden {
display: none;
}
<button onclick="F1()">Hide Lw</button>
<label id="bL1"></label>
<button> Lw </button>
<label id="ebL1"></label>
If you are trying in this method you are doing very wrong but use the following code that should work correctly to hide a button or anything you want to hide.
function F1() {
bL1 = document.getElementById("bL1").style.display = 'none';
}
<button onclick="F1()">Hide Lw</button>
<button id="bL1"> Lw </button>
This is a very easy and short method to apply CSS inside JavaScript.
Related
I have this js function:
var iframeShowing = false;
async function show() {
var iframe1 = document.getElementById('help-popup');
iframe1.style.display = iframeShowing ? 'flex' : 'none';
iframeShowing = !iframeShowing;
}
The problem is that I need to click 2 times to actually show the iframe and make it work properly. After I click 2 times, it works properly(every click shows and hides the iframe). Try it on the website and you'll understand.
This is the html code:
<i class="fas fa-question-circle" id="questionmark" onclick="show();" >
This is the current website: https://personal-website.krix12.repl.co/
The above mentioned function is called when the blurple question icon is clicked.
How can I make it work on the first click?
You can just use DOMTokenList.toggle() to toggle between flex and none:
function toggle() {
var iframe1 = document.getElementById('help-popup');
iframe1.classList.toggle('hide');
}
iframe {
display: flex;
}
.hide {
display: none;
}
<div><i class="fas fa-question-circle" id="questionmark" onclick="toggle();">?</i></div>
<iframe id="help-popup" class="hide"></iframe>
I have a banner on my page that is fairly extensive in size, so I wanted to offer the user the ability to toggle its visibility (using the Display property/attribute). I have the button working to set the Display: none but it fails to set it back to Display: block upon more clicking. Code snippets:
CSS:
.banner-row {
display: block;
}
HTML:
<button class="btn btn-default navbar-btn" onclick="toggleBanner()"><span class="dx-icon-collapse icon"></span></button>
JavaScript:
<script>
function toggleBanner() {
if (document.getElementById("banner-row").style.display = "block") {
document.getElementById("banner-row").style.display = "none";
}
else if (document.getElementById("banner-row").style.display = "none") {
document.getElementById("banner-row").style.display = "block"
}
}
</script>
I hope that what I'm asking is possible, and sorry for any stupid mistakes on my part! Still learning all of this stuff.
There are a number of issues:
1) You are trying to the set the style of an element with an id in the HTML but which is a class in the CSS.
2) You are assigning (=) values in your if/else condition rather than doing a comparison (== or ===).
3) You are checking the inline style and, initially, the banner doesn't have one so display is empty. You can either check for that like I've done below, or use getComputedStyle.
// Cache the element so you don't repeat yourself
const banner = document.getElementById("banner-row");
function toggleBanner() {
if (banner.style.display === "block" || banner.style.display === '') {
banner.style.display = "none";
} else {
banner.style.display = "block"
}
}
#banner-row {
display: block;
}
<div id="banner-row">BANNER</div>
<button class="btn btn-default navbar-btn" onclick="toggleBanner()">Click</button>
When you use a class to hide the banner, all you need in JS is a simple toggle of the class list.
const banner = document.getElementById("banner-row");
const button = document.getElementsByTagName("button")[0];
toggleBanner = () => banner.classList.toggle("hidden");
.hidden {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="banner-row">
<img src="https://via.placeholder.com/300x100">
</div>
<button class="btn btn-default navbar-btn" onclick="toggleBanner()">
<span class="dx-icon-collapse icon"></span>
</button>
You need to use == instead of = in your if and else if conditions. == is the comparison operator in JavaScript and = is used for assigning values.
Onclick button "button1" , we are displaying pop up box and hiding "button1".
but now we want to display the "button1" once we click on "close" button of "pop up box"
pop up close button code
<a href="javascript:void(0)" class="close">
<input type="button" onclick="showDiv()" style="display:none;" />
</a>
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
}
button1 code
<div id="aitcg-control-panel"><button>button1</button></div>
Edit
I tried this code : document.getElementById('aitcg-control-panel').style.display = "block"; but still it didt worked for me....
After looking into your website you've provided i found out that the elements you wanted to reappear were removed from the page.
Why don't you just keep the button instead? Because after saving the item it refreshes the page anyway.
There should be any javascript code in the module (aitcg) you've installed on your site that removes the elements aitcg-toolbox-{{somenumber}} and aitcg-control-pane from the page.
I hope this could be of any help.
Is this what you were looking for? I'm sure there is a cleaner way to do it, but your question wasn't super clear.
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
document.getElementById('ShowDivButton').style.display = "none";
}
function hideDiv() {
document.getElementById('aitcg-control-panel').style.display = "none";
document.getElementById('ShowDivButton').style.display = "initial";
}
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
<button id='ShowDivButton' onclick="showDiv()">Open Div</button>
<div id="aitcg-control-panel" >
<button id='ShowDivButton' onclick="hideDiv()">Close Div</button>
</div>
I've sincerely not fully understood your question. But from what you've said, I'm assuming this is what you want:
function display(a) {
//Hide the button
a.style.display = "none";
//You need setTimeout for the code to wait for the alert to show the button again
setTimeout(function() {
alert('ok');
a.style.display = "block";
}, 100);
}
<button onclick="display(this);">Click me</button>
Hope it helps in some way and if this is not what you wanted, please reply.
after giving link for you website. i can tell you the reason why its not working for you.
on click of save design you are removing code for aitcg-control-panel
that's why you are not able to show it back
proof: before clicking code for button div exists
After click on save design
proof:
code is not there. that's why you are not able to show.
i debugged your code i found one function
_getControlPanelHtml: function()
{
if (this.config.editorEnabled) {
var returnHtml = "";
returnHtml += '<div id="aitcg-control-panel" style="display:none">' +
'<button onclick="return setproductlogin(\'null\', event);" class="aitcg-button apply-but" id="submit-editorApply-{{rand}}" title="{{apply_text}}">{{apply_text}}</button>' +
'<button class="aitcg-button reset-but" id="submit-editorReset-{{rand}}" title="{{reset_text}}">{{reset_text}}</button>' +
'</div>';
return returnHtml;
}
return '';
},
in this function they are returning '';
please change this function or other function to give you the same code what you had before clicking.
I'm using javascript to show a hidden div by clicking a button. After the div is displayed, I want to be able to click the button again and hide the div, and so on...
Here is my javascript:
<script type="text/javascript">
function showDiv() {
document.getElementById('dropdownText').style.display = "block";
}
</script>
This is the button:
<input type="button" name="answer" value="+" onclick="showDiv()" />
This is the hidden div:
<div id="dropdownText" style="display:none;">
This is the dropdown text.
</div>
You can e.g. bind specified class to the element and just toggle it.
function showDiv() {
document.getElementById('dropdownText').classList.toggle("hidden");
}
.hidden {
display: none;
}
<input type="button" name="answer" value="+" onclick="showDiv()" />
This is the hidden div:
<div id="dropdownText" class='hidden'>
This is the dropdown text.
</div>
If you tagged this question with jQuery as well, so I guess you could use the .toggle function, like this -
$('#answer').click(function() {
$('#dropdownText').toggle();
}
If you want to stick up with javascript only, your showDiv() function should look like this -
function showDiv() {
let text = document.getElementById('dropdownText');
if (text.style.display === 'none') {
text.style.display = 'block';
}
else {
text.style.display = 'none';
}
}
You should capture the current style every time a button is clicked, since you want to 'toggle' it back to the opposite state.
You simply need to do this:
const drop = document.getElementById('dropdownText')
const toggleDropdown = _ => {
const cl = drop.classList
cl.contains('hide')?cl.remove('hide'):cl.add('hide')
}
#dropdownText.hide {display:none}
/* DropDown Styles for this demo */
#dropdownText {width: 10em; height: 4em; background: green}
<button onclick='toggleDropdown()'>Toggle Div</button>
<div id='dropdownText'></div>
Note: Click Run Code Snippet to see the code in action.
The way it works is by detecting if it has the hide class and based on that, toggle that class.
The actual hiding and showing is done via CSS!
<div id="dropdownText" style="display:none">
This is the dropdown text.
</div>
<script type="text/javascript">
function showDiv() {
var x = document.getElementById('dropdownText');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
I have to toggle between two icons based on some criteria. How do I do this in jQuery?
<a href='' id="home" onclick="myfunction(this)" data-toggle="toggle">
<span class="fa fa-train"></span>
</a>
myfunction($this) {
// ...
if ($($this).hasClass("fa fa-train")) {
$($this).removeClass("fa fa-train");
$($this).addClass("fa fa-car");
}
else {
$($this).addClass("fa fa-car");
$($this).addClass("fa fa-train");
}
// ...
}
clicked anchor element do not have class added, its child span does :
function myfunction($this) {
$($this).find('span').toggleClass('fa-train fa-car');
}
Do something like this
$('a#home').on('click', function(){
var childSpan = $(this).find('span');
if(childSpan.hasClass('fa-train')){
childSpan.removeClass('fa-train');
childSpan.addClass('fa-car');
}
else if(childSpan.hasClass('fa-car')){
childSpan.removeClass('fa-car');
childSpan.addClass('fa-train');
}});
you are using this which will check the a tag if has class . while you should check in the span next to a tag .you should use like this
myfunction($this) {
// ...
if ($($this).next('span').hasClass("fa fa-train")) {
$($this).next('span').removeClass("fa fa-train");
$($this).next('span').addClass("fa fa-car");
}
else {
$($this).next('span').addClass("fa fa-car");
$($this).next('span').addClass("fa fa-train");
}
// ...
}
With a condition in one line:
$($this)
.addClass((condition=(Math.random() > .5)) ? 'fa-car' : 'fa-train')
.removeClass(condition ? 'fa-train': 'fa-car')
Note: This will not work if you "use strict" and of course your code will be less readable.
Thanks everyone, yes i had to search for 'span' and add toggle class. hasClass is also good way to check beforehand that the class exist or not.
This is a concept that I came with which is a bit logical. Instead of using complicated language, what this does is it hides the add button and makes a times button while showing the message that was hidden. It is fairly simple JQuery.
$(document).ready(function() {
$("#addCross").click(function() {
document.getElementById("addCross").style.display = "none";
document.getElementById("addAdd").style.display = "inline-block";
document.getElementById("hello").style.display = "block";
});
$("#addAdd").click(function() {
document.getElementById("addCross").style.display = "inline-block";
document.getElementById("addAdd").style.display = "none";
document.getElementById("hello").style.display = "none";
});
});
/*
Unoptional CSS
Just to make the buttons look better in the snippet.
*/
button {
background: transparent;
border: none;
}
button:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9b271ce18a.js" crossorigin="anonymous"></script>
<div>
<label>Press the Button: </label>
<button id="addCross"><i class="fas fa-plus"></i>
<button id="addAdd" style="display: none;"><i class="fas fa-times"></i></button>
<div style="display: none;" id="hello">
<p>Hello. I was hidden by the Magic of JQuery.</p>
<label>This design also makes a cool rotating add sign if you look closely. Ha Ha!!</label>
</div>