I have two boxes. I want to create functions, which will give me some capabilities.
If I click on the black box the red one is shown.
When I click one black box again, I want to hide the red box.
This is what I have done:
var showMeRedBox = document.getElementsByClassName('box2_red')[0]
var blackBox = document.getElementsByClassName('box1_black')[0]
var redBox = document.getElementsByClassName('box1_black')[0]
var hideRedBox = document.getElementsByClassName('box2_red')[0]
var showMe = function(show) {
showMeRedBox.style.display = show
}
blackBox.onclick = function() {
showMe('inline-flex');
}
var hideMe = function(hide) {
hideRedBox.style.display = hide
}
blackBox.click = function() { // here should be seocnd click, when I want to hide the red box
hideMe('none');
}
Do somebody give me advice, how can I do that?
Thank you,
Megi
You can use a variable to save the state of the redBox and then inside click ask for it:
var isHidden = false;
blackBox.click = function() {
if (isHidden) {
isHidden = false;//show the box
} else {
isHidden = true;
hideMe('none');
}
}
You can use AJAX if you're familiar with
Refer AJAX part of https://www.youtube.com/watch?v=rJesac0_Ftw
Hope it helps
Related
I have a title within a div tag.
I need to translate the title whenever a translate button is clicked.
I have so far gotten to the point where i find the title div and want to change the contents of it by using a languageMap. But its not functioning! Any ideas?
var languageMap = {
'English1': 'French1',
'English2': 'French2'
}
function translateTitle() {
var qmTitle = document.getElementById('toolTitle')
var qmTitleText = qmTitle.innerHTML
var translatedTitle = languageMap[qmTitleText]
qmTitle.innerHTML = translatedTitle
}
Ok If you click the title it will change according to your map
What you needed to do is add an event listener for the click event
This sample shows you how to do that
I also exended your map so it translates backwards as well ..
var languageMap = {
'English1': 'French1',
'English2': 'French2',
'French1': 'English1',
'French2': 'English2'
}
var qmTitle = document.getElementById('toolTitle')
function translateTitle() {
// var qmTitle = document.getElementById('toolTitle')
var qmTitleText = qmTitle.innerHTML
var translatedTitle = languageMap[qmTitleText]
qmTitle.innerHTML = translatedTitle
}
qmTitle.addEventListener("click", translateTitle);
<h2 id="toolTitle">English1</h2>
I have two images and I want a button which has an onclick event to switch the background image of a div I have, the problem is the first two clicks work but the third click still returns the second image instead of the first. I tried testing it with background color and it works fine, it switches between the two colors.
I would like a javscript only answer also.
Javascipt
(function() {
var clickMe = document.getElementById('ray');
var theBody = document.getElementById("container");
var image1 = "url(chidi.png)"
var image2 = "url(chidi2.jpg)"
var colorMe = function() {
if(theBody.style.backgroundImage == "" || theBody.style.backgroundImage == image2) {
theBody.style.backgroundImage = image1;
} else {
theBody.style.backgroundImage = image2;
}
console.log(theBody.style.backgroundImage);
}
ray.onclick = colorMe;
}());
Okay here is what i have:
<script type="text/javascript">
var where = document.getElementById("info")
var texts = false;
function clear() {
where.innerHTML = "";
};
function dostuff(what) {
if(where.style.value === ""){
var comm = document.createTextNode(what);
where.appendChild(comm);
}else {
clear();
}
};
</script>
the id "info" is a div
this is basically a vertical navigation bar that shows tooltips in a div under the buttons when you hover over them.
So I want to first check if the div has no value then if it doesn't then it will append text into it, else it will clear the text but i also want it to append the text after it clears. I'm not sure how to do this and help would be appreciated. thanks
Since you want to clear the item anyways and put your new text in, why even bothering with the conditional? You could just as easily do:
function dostuff(what) {
where.innerHTML = what;
};
Working example
Im trying to hide/show a JS function I have defined in a chrome extension.
What I have so far:
The span classes I am trying to hide are label:
dspan.className = "cExtension";
//Create toggle button:
function createToggleButton(){
var toggleButton = document.createElement("button");
toggleButton.innerHTML = "Toggle Overlay";
toggleButton.id = "Toggle"
var header = document.getElementById("header");
header.appendChild(toggleButton);
toggleExtension();
}
// find all spans and toggle display:
function toggleExtension(){
var spans = document.getElementsByTagName('span');
var toggle = function() {
for (var i = 0, l = spans.length; i < l; i++) {
if (spans[i].getAttribute('class') == 'cExtension')
if (spans[i].style.display == 'none') spans[i].style.display = '';
else spans[i].style.display = 'none';
}
}
document.getElementById('Toggle').onclick = toggle;
}
The button shows on the header, however it is unclickable. If I change document.getElementById('Toggle').onclick = toggle; to document.getElementById('Toggle').onclick = alert{"Hello"); the alert is triggered on page load on not onclick. I am trying to get this done in pure JS. Where am I going wrong?
First of all, document.getElementById("Toggle").onclick = alert("Hello"); will set the onclick event to whatever the alert function returns, not the alert function itself. So the alert function happens at page load so it can figure out what to return. So you could do this: document.getElementById("Toggle").onclick = function(){alert("Hello");}; and that might work.
Edit: Scratch everything that was here: I missed that toggle variable set to a function in toggleExtension.
I haven't tested all this so I can't guarantee that it'll all work in your specific case.
if visible is set remove it, otherwise add it
div.classList.toggle("visible");
add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
Make sure browser support: http://caniuse.com/#feat=classlist
Why not use jQuery?
It will do all hard job for you.
http://api.jquery.com/toggle/
Cheers!
I have this jsfiddle which works once.
function toggle_off(itemID){
alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
document.getElementById(itemID).style.display = 'none';
}
function maskIt(x){
alert(x);
var mask = document.createElement('div');
mask.id = 'maskIt';
mask.setAttribute("class", "maskIt");
mask.onclick = function(){toggle_off('maskIt');}
mask.innerHTML = 'click to close mask';
document.body.appendChild(mask);
}
On click it opens a mask (layer), on mask click - closes it self - all fine up to here.
On second click, the mask opens again, but when you click on it the second time it won't close.
Any ideas?
Instead of hiding the div you should remove it as you are creating a new div each click
function toggle_off(itemID){
alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
var mask = document.getElementById(itemID);
mask.parentNode.removeChild(mask);
}
DEMO
You are not destroying the first instance of "maskIt" when you close the overlay, so they build up in the background. If you inspect the page after the second click, you will see two maskIt divs, the first one hidden.
When you call getElementById('maskIt'), it will find the first, hidden, one in the document, and so not hide the second.
Why not reuse the first mask?
function toggle_off(itemID) {
alert(itemID + '->' + document.getElementById(itemID).getAttribute("style"));
document.getElementById(itemID).style.display = 'none';
}
function maskIt(x) {
alert(x);
var mask = document.getElementById('maskIt');
if (mask == null) {
mask = document.createElement('div');
mask.id = 'maskIt';
mask.setAttribute("class", "maskIt");
mask.onclick = function () {
toggle_off('maskIt');
}
mask.innerHTML = 'click to close mask';
document.body.appendChild(mask);
}
else
{
mask.style.display = "block";
}
}
http://jsfiddle.net/dFp6f/2/