How to bring my element back after using display:none - javascript

On click I can hide my div element with display:none but can't get it back with display:inline when button is clicked
document.getElementById("red").onclick = function (){
document.getElementById("red").style.display = "none";
}
document.getElementById("back").onclick = function () {
document.getElementsById("red").style.display = "inline";
}

Hi your script has typo error.
getElementsById is having Elements instead of Element.
Alway use Console for error messages it will help you alot :).
Cheers !!!
Your script should look like this .
document.getElementById("red").onclick = function (){
document.getElementById("red").style.display = "none";
}
document.getElementById("back").onclick = function () {
document.getElementById("red").style.display = "inline";
}

Example: display:none to display:inline toggle.
document.getElementById("red").onclick = function (){
document.getElementById("red").style.display = "none";
}
document.getElementById("back").onclick = function () {
document.getElementById("red").style.display = "inline";
}
#red
{
color:#fff;
background:red;
padding:8px 20px;
}
<div id="red">RED (Click me)</div>
<button id="back">Back</button>
You can always see the errors in the console and figure out the solution.

I would advise you to use a class for styling and also use Element.addEventListener() for the events.
var red = document.getElementById('red')
var back = document.getElementById('back')
red.addEventListener('click', function() {
this.classList.add('hidden')
})
back.addEventListener('click', function() {
red.classList.remove('hidden')
})
https://jsfiddle.net/cnzabf1a/
Documentation on:
addEventListener
classList

If your're using flex using 'inline-flex' may be better:
document.getElementById("red").style.display = "inline-flex";

Related

how to make multiple click events on the same element?

How can I use several click events on the same element in JavaScript?
I try to make that when I click on the h3 element it opens its description and then I again click on the element it closes the description.
var p, img, question;
function clickOn(){
img = document.getElementsByClassName('down-arrow')[0];
p = document.querySelectorAll('p')[0];
p.setAttribute('class','show-text');
/*img.setAttribute('class','show');*/
}
function clickOff(){
img = document.getElementsByClassName('down-arrow')[0];
p = document.querySelectorAll('p')[0];
p.removeAttribute('class','show-text');
/*img.removeAttribute('class','show');*/
}
question = document.getElementsByClassName('question')[0];
question.addEventListener('click', clickOn, false);
question.addEventListener('click', clickOff, false);
Try using toggle for adding and removing class https://www.w3schools.com/howto/howto_js_toggle_class.asp:
var p, img, question;
function clickOn(){
img = document.getElementsByClassName('down-arrow')[0];
p = document.querySelectorAll('p')[0];
p.classList.toggle('show-text');
}
question = document.getElementsByClassName('question')[0];
question.addEventListener('click', clickOn, false);
You can declare a global variable
var isTextDisplayed = false;
Then you can call same event listener and open or close the description on basis of the bit. For example
document.getElementById("myBtn").addEventListener("click", function() {
if(!isTextDisplayed) {
//HIDE DESCRIPTION CODE
}
else {
//SHOW DESCRIPTION CODE
}
isTextDisplayed = !isTextDisplayed;
});
Full code:
var isTextDisplayed = false;
var description = document.getElementById("description");
document.getElementById("myBtn").addEventListener("click", function() {
if(!isTextDisplayed) {
description.style.display = 'none';
}
else {
description.style.display = 'block';
}
isTextDisplayed = !isTextDisplayed;
});
<h3 id="myBtn">CLICK TO TOGGLE DESCRIPTION</h3>
<p id="description">
Some dummy text for description goes here in the block
</p>
For demo, see JSFIDDLE CODE

How do I add a button to a div class on load from Javascript? [duplicate]

This question already has answers here:
How to add onload event to a div element
(26 answers)
Closed 5 years ago.
For an assignment, I cannot touch the HTML code and am editing an external JS file. I have to refer the code to an existing class and turn that into a button to run a script.
The has to be ran on load to transform an element with a given id into a button that can also run a function on click.
So let's say the we have id="bar",
how do I go about it?
My code doesn't work at all.
document.getElementById("bar").onload = function () { myFunction() };
function myFunction() {
document.getElementById("bar").innerHTML = "<button></button>";
}
Why don't you just execute your script as the DOM is ready? To do so,
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("bar").innerHTML = "<button></button>";
}, false);
You just need a createElement function.
This works:
document.addEventListener("DOMContentLoaded", function(){
var button = document.createElement("button");
button.innerHTML = "This is a button";
// assuming the Div's ID is bar
var div = document.getElementById('bar');
div.appendChild(button);
//the following function will alert a window when the button is clicked
button.addEventListener ("click", function() {
alert("Button was clicked");
});
});
Updated Codepen
I think this is bit tha you needed
var bar = document.getElementById('bar');
window.onload = function() {
var barInner = bar.innerHTML;
bar.innerHTML = '<button>' + barInner + '</button>';
}
bar.onclick = function() {
alert("Hello\nHow are you?");
};
document.getElementById("bar").onload = myFunction();
function myFunction() {
document.getElementById("bar").innerHTML = "<button>Button</button>";
}
There you go!
Not every single HTML element has a load event.
Only some of them are concerned, such as the window, an image... etc
Have a look here on MDN to learn more about this.
Here is a simple snippet resolving all what you mentioned.
window.addEventListener("load", () => {
// you can put your entire script in here.
var elt = document.getElementById("bar"),
button = document.createElement("button");
button.textContent = elt.textContent;
button.onclick = callback;
elt.textContent = '';
elt.appendChild(button);
function callback() {
console.log("The button has been clicked");
}
});
<div id="bar" style="background: beige; height: 2em">Click me</div>
In the previous snippet, I am appending the button in the element. But if the matter is really to transform it into a button, there we go:
window.addEventListener("load", () => {
// you can put your entire script in here.
var elt = document.getElementById("bar"),
container = elt.parentNode,
button = document.createElement("button");
button.id = elt.id; // if you want to keep the id
button.textContent = elt.textContent;
button.onclick = callback;
container.removeChild(elt);
container.appendChild(button);
function callback() {
console.log("The button has been clicked");
}
});
<div style="background: #fee; height: 2em">
<div id="bar" style="background: beige; height: 2em">Click me</div>
</div>

Animation issue jQuery CSS

I just want to make an exit animation but I've got problems with the text inside the box which I want to hide.
$(".dropdown").click(function () {
var dropdownC = $(this).find(".dropdownc");
var dropdownUl = $(this).find("ul");
if (dropdownC.css("visibility") == "visible") {
dropdownC.removeClass("comein").addClass("comeout");
var hide = function () {
dropdownC.addClass("hide");
};
setTimeout(hide, 300);
} else {
dropdownC.removeClass("hide").removeClass("comeout").addClass("comein");
}
});
Here's the jsfiddle. Thank you for any help.
I would use display: block / none instead of visiblilty: visible / hidden
https://jsfiddle.net/dabvkmrL/1/

Event listener not firing on click

I am creating a simple function to close a flash message div on click event, but my listener is not firing.
I wrote 3 different functions to try to get it working, but nothing is happening and Chrome console isnt telling me anything.
My first was in ES6 class style, this one:
class closeFlashMessages {
constructor () {
this.getFlashMessages = document.querySelector("#flash-messages");
this.addEventListeners();
}
close () {
console.log(this.getFlashMessages);
this.getFlashMessages.className = "hide";
}
addEventListeners () {
if(this.getFlashMessages)
this.getFlashMessages.addEventListener("click", this.close);
}
}
new closeFlashMessages();
My second was this:
(function (){
let getFlashMessages = document.querySelector("#flash-messages");
function close () {
console.log(getFlashMessages);
getFlashMessages.className = "hide";
}
function addEventListeners () {
getFlashMessages.addEventListener("click", function () {
close()
});
}
addEventListeners();
});
My last one is this:
(function (){
let getFlashMessages = document.getElementById("flash-messages");
getFlashMessages.addEventListener("click", close(getFlashMessages));
function close (id) {
console.log(getFlashMessages);
getFlashMessages.className = "hide";
}
});
My HTML:
<div id="flash-messages">
<div class="flash success">
<p>Recept byl přidán do nákupního seznamu.</p>
</div>
</div>
But none of them worked!! I dont understand
With the first two, I was getting undefined on my this.getFlashMessages also not sure why.
My solution is not in ES6
function Init(){
var id = document.getElementById('flash-messages');
var msg = document.querySelector('.flash');
id.addEventListener('click',function(){
msg.className = 'hide';
});
}
Init();
see demo here
I am not very much familiar with ES6.
But if I try similar code sample on a javascript it will be as given below and I hope it will be almost similar in ES6 aswell.
var getFlashMessages = document.getElementById("flash-messages");
getFlashMessages.addEventListener("click", function()
{
clicked(getFlashMessages);
});
function clicked(id){
console.log(id);
id.className = "hide";
}
Here, I am calling anonymous function, and its default argument will be event object as given in https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.

onscroll div in a JavaScript object

i want to build a div with scroll, that when you scroll this div, it will active anothe function.
i need to build this in a Object.
there is any way to do this?
i write here an example source (that not work) of what i want.
<script type="text/javascript">
function onsc(divName, divChange) {
this.play = function() {
window.onload = function() {
document.getElementById(divName).onscroll = function() {
this.scroll(n)
}
};
}
this.scroll = function(n) {
document.getElementById(divChange).innerHTML = "you scroll!";
}
}
c[1] = new onsc("div1", "div1_i").play();
</script>
<div id="div1_i">this div will change when you scroll</div>
<div id="div1" style="background:#C6E2FF; width:300px; height:200px; overflow-y:scroll;">
<p style="height:800px;">txt</p>
</div>
Your code was nearly there. I made a few changes and put into a JSFiddle for you.
I added comments at what you missed. Most importantly the context of this changes when you entered into that function on the onscroll event.
JavaScript
function onsc(divName, divChange) {
// First of all make `this` inherit to below functions
var self = this;
this.play = function () {
document.getElementById(divName).onscroll = function() {
// Changed this to call the parent and place the correct DIV
self.scroll(divChange)
}
}
this.scroll = function (n) {
document.getElementById(divChange).innerHTML = "you scroll!";
}
}
c = new onsc("div1", "div1_i").play();
Demo
Have a look at my JSFiddle: http://jsfiddle.net/bJD8w/2/

Categories