I have seen questions similar to this one but not quite on point. I just want to do something really simple: when button 1 is clicked, it should hide and button 2 should appear; and then when button 2 is clicked, button 2 should hide and button 1 should show.
I am trying to do this by modifying the z-index, however it is not working.
This is the code I am using to do it:
if (attacker == player 1) {
document.getElementById("p1-play").style.zIndex = -1;
document.getElementById("p2-play").style.zIndex = 1;
}
else {
document.getElementById(p2-play).style.zIndex = -1;
document.getElementById(p1-play).style.zIndex = 1;
}
where p1-play is button 1 and p2-play is button 2
It would be better to use display:
var p1Play = document.getElementById("p1-play");
var p2Play = document.getElementById("p2-play");
if (attacker == player1) {
p1Play.style.display = 'none';
p2Play.style.display = 'block';
}
else {
p1Play.style.display = 'block';
p2Play.style.display = 'none';
}
Related
I need to run a script only when a hidden div (display:none) is active.
When press "radio button" display "div1" with the fake loader and after 3 seconds display another div called "my_div".
But if the user don't press the "radio button", the random text on "my_div" still appears.
I need to fix this, only show this random text "my_div" if the user press the radio button. So, when user press "radio button" display "div1" with fake loader and after 3 seconds, display another div (already working), if not press the button, nothing happens (don't run the random script).
Working:
https://jsfiddle.net/zto6gv1c/3/
This is my project:
function show1() {
document.getElementById('div1').style.display = 'none';
}
function show2() {
document.getElementById('div1').style.display = 'block';
}
var r_text = new Array();
r_text[0] = "Disponível";
r_text[1] = "Indisponível";
r_text[2] = "Disponível";
r_text[3] = "Indisponível";
r_text[4] = "Disponível";
r_text[5] = "Disponível";
r_text[6] = "Indisponível";
r_text[7] = "Disponível";
r_text[8] = "Indisponível";
r_text[9] = "Disponível";
r_text[10] = "Indisponível";
r_text[11] = "Disponível";
var i = Math.floor(7 * Math.random())
document.write(r_text[i]);
window.onload = function() //executes when the page finishes loading
{
setTimeout(func1, 3000); //sets a timer which calls function func1 after 2,000 milliseconds = 2 secs.
};
function func1() {
document.getElementById("my_div").className = "show";
}
.hide {
display: none;
}
p {
font-weight: bold;
}
.show {
display: block;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Deseja chegar a disponibilidade do produto?</p>
<input type="radio" name="tab" value="igottwo" onclick="show2();" /> Sim
<div id="div1" class="hide">CHECANDO</div>
<div id="my_div" class="hide"></div>
I hope this is what you are looking for. Let me know if I am nearby.
function show2() {
document.getElementById('div1').style.display = 'block';
setTimeout(func1, 3000);
}
Then, replace document.write with below
document.getElementById("my_div").innerHTML = r_text[i];
Then replace your window.onload code with below
window.onload = function() //executes when the page finishes loading
{
setTimeout(function(){
if(document.getElementById('div1').style.display != 'block'){
func1();
}
}, 3000); //sets a timer which calls function func1 after 2,000 milliseconds = 2 secs.
};
Oke so WHEN class hide has display none - you want to run some other code ?
You can check the visibility this way:
var isVisible = document.getElementsByClassName("hide")[0].style.display == "block";
if(isVisisble){
this thing is hiden
}else{
this thing is not hiden
}
We use getElementsByClassName because you put it on a class with the name 'hide' - there is only one of these elements present so we use [0] to get the first one (the only one) then we use the style.display to check the value.
Sorry, I am new to stack overflow so hope I am doing this correctly.
I have the following code:
{
if (session.findById("T1").text == "") {
document.getElementById("W1").style.display = 'none';
} else {
document.getElementById("W1").style.display = 'inline';
}
}
Basically it is saying if T1 is blank, then W1 should not show. If T1 is not blank, W1 will show.
I can't get it working and then tried this by itself:
document.getElementById("W1").style.display = 'none';
What happens is the item quickly disappears (flashes) but then comes back again. So it's kind of working but I want it to stay permanently hidden. Unless of course T1 contains text and then it should reappear.
How can I resolve?
Thanks!!
hey look at my example
function isEmpty() {
var sample = document.getElementById("sample");
var div = document.getElementById("divko");
if (sample.value.trim() == "") {
div.setAttribute("style", "display:none;");
} else {
div.removeAttribute("style");
}
}
<input id="sample" name="sample" onkeyup="isEmpty()">
<div id="divko" style="display:none;">Sample</div>
you can use following hide option
document.getElementById("W1").style.display = 'block';
Yesterday I asked a question about improving efficiency in my code. Today I have another question in the same spirit of trying to write less lines of code to accomplish repetitive tasks.
I have the following code:
function myIntroductionText() {
introPos.style.display = 'block';
posOne.style.display = 'none';
posTwo.style.display = 'none';
posThree.style.display = 'none';
posFour.style.display = 'none';
posFive.style.display = 'none';
posSix.style.display = 'none';
posSeven.style.display = 'none';
posEight.style.display = 'none';
posNine.style.display = 'none';
posTen.style.display = 'none';
posEleven.style.display = 'none';
backButton.style.visibility = 'hidden';
}
function myPositionOne() {
introPos.style.display = 'none';
posOne.style.display = 'block';
posTwo.style.display = 'none';
posThree.style.display = 'none';
posFour.style.display = 'none';
posFive.style.display = 'none';
posSix.style.display = 'none';
posSeven.style.display = 'none';
posEight.style.display = 'none';
posNine.style.display = 'none';
posTen.style.display = 'none';
posEleven.style.display = 'none';
backButton.style.visibility = 'visible';
}
function myPositionTwo() {
introPos.style.display = 'none';
posOne.style.display = 'none';
posTwo.style.display = 'block';
posThree.style.display = 'none';
posFour.style.display = 'none';
posFive.style.display = 'none';
posSix.style.display = 'none';
posSeven.style.display = 'none';
posEight.style.display = 'none';
posNine.style.display = 'none';
posTen.style.display = 'none';
posEleven.style.display = 'none';
}
The HTML looks something like this:
<p class="textContent" id="introductionText">Introduction Text Goes Here</p>
<p class="textContent" id="position1">content1</p>
<p class="textContent" id="position2">content2</p>
<p class="textContent" id="position3">content3</p>
Each position (i.e. introPos, posOne, posTwo) also has a corresponding function that looks essentially the same as the function above, except it changes the display based on which position it is in.
I'm thinking that I could use a loop and/or an if/else statement to make this task more efficient. I tried by using getElementsByClassName('textContent'), which (I think) produced an array containing all of the elements with that class. According to the console.log is contains [p#introductionText.textContent, p#position1.textContent, so on and so on...]. So, I wrote the following code to try to loop through it:
var blanks = document.getElementsByClassName("textContent") // this creates the array that I mentioned
for (item in blanks) {
if (blanks[0] === introductionText.textContent) {
blanks[0].style.display = 'block';
} else {
blanks[item].style.display = 'block';
}
}
I tried using p#introductionText.textContent but that returned an error. I'm very new to JavaScript so I fully recognize that I could be doing something very silly here, but any help would be appreciated.
EDIT:
The error message says Uncaught SyntaxError: Unexpected tocken ILLEGAL
I should also add that my goal is to have only one position be visible at each time. I have a "Back" and "Next" button that allows users to go from posOne to posTwo, to posThree, and so on. So, in addition to making posTwo visible, I also need to make posOne and/or posThree not visible.
Thanks!
The first thing is moving all those Javascript style expressions to CSS:
#introPos,
#posOne,
#posTwo,
#posThree,
#posFour,
#posFive,
#posSix,
#posSeven,
#posEight,
#posNine,
#posTen,
#posEleven {
display: none;
}
Or even shorter
#introductionText>.textContent {
display: none;
}
This would enable you to shorten each function considerably:
function myPositionOne() {
posOne.style.display = 'block';
backButton.style.visibility = 'visible';
}
Instead of setting each style via JS again and again, you'd simply set those that change.
The next step would be to rewrite all those functions into one that accepts a parameter which element you are targeting:
function myPosition(pos) {
var parent = document.getElementById("text-container");
var children = parent.getElementsByClassName("textContent");
var element;
// first hide all <p class="textContent"> children
for (var i = 0; i < children.length; i++) {
children[i].style.display = 'none';
if (i == pos) {
element = children[i];
}
}
// then show the right one
if (element) {
element.style.display = 'block';
}
// show or hide the back button depending on which child we are dealing with
if (pos > 0) {
document.getElementById("backButton").style.visibility = 'visible';
} else {
document.getElementById("backButton").style.visibility = 'hidden';
}
if (pos >= children.length-1) {
document.getElementById("nextButton").style.visibility = 'hidden';
} else {
document.getElementById("nextButton").style.visibility = 'visible';
}
}
This sets only the child number #pos visible and adjusts the visibility of the back button (assuming the back button has the ID "backButton").
Maybe this:
All paragraphs also have the class "textContent". Make this display none and display the correct paragraph via given paragraph-id:
function myFunction(classDisplay) {
var elems = document.getElementsByClassName('textContent');
for (var i=0;i<elems.length;i+=1){
elems[i].style.display = 'none';
}
document.getElementById(classDisplay).style.display = "block";
}
The following will hide all but position 2:
myFunction("position2");
I don't know about the back-button, this is always be visible?
EDIT: I've tested this and corrected the code.
If you use JQuery, you can also use the following instead of the for loop:
$('.textContent').css('display','none');
In newer versions of JavaScript you can use:
Array.from(document.getElementsByClassName('myclass')).forEach((item) => {
item.style.backgroundColor = "blue";
})
I'm currently making an iphone webapp and have almost finished it, I just need to fix this one little issue im having
Ive managed to hide one div layer and show another, but what I would like is for the same button to then show the layer I have hid and hide the one that I have shown when clicked again. So basically clicking the button would take it back to the original state
the code I am currently using is
<script type="text/javascript">
function toggle_layout(d)
{
var onediv = document.getElementById(d);
var divs=['Posts','Posts2'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
It hides a div I have named "Posts" and shows a div I have named "Posts2", but clicking it again does not reverse the effect.
If you wanna take a look at my site its http://a-m-creativecapture.tumblr.com/
Will have to view it on a mobile to see what I am talking about.
Have you tried style.visibility (visible|hidden) instead of style.display?
Assuming that your divs are something like this:
<div id="posts"></div>
<div id="posts2"></div>
You can use the following code:
var posts = document.getElementById('posts'),
posts2 = document.getElementById('posts2');
function toggle() {
if (this == posts) {
posts.style.display = 'none';
posts2.style.display = 'block';
} else {
posts.style.display = 'block';
posts2.style.display = 'none';
}
}
div1.onclick = toggle;
div2.onclick = toggle;
I have my code set so when you click the picture switches, and then a menu pops up. (I haven't finished the menu yet). But when I click on the picture, it is not changing. Can you tell me how to fix my code thanks.
I can't get jsfiddle to work so here is my website http://spencedesign.netau.net/singaporehomemenu.html
And the troubling code is:
function showMore() {
if (more.style.display != "none") {
more.style.display = "none";
}
else {
more.style.display = "block";
}
}
imgs = Array("more.png", "less.png");
var x = 0;
function change() {
document.getElementById("bob").src = imgs[++x];
if (x == 1) {
x = -1;
}
}
if (!imgs[x + 1]) {
x = -1;
}
JSFiddle
(yes I have all of the appropriate body and html tags, I just thought it wasn't needed to demonstrate my problem) Thanks for your time!
Your problem is that you don't have an ID called bob. So when you try to call:
document.getElementById("bob") ...
This is null.
You need to set the image you want to change to have an id called bob (Why you've called it bob though?)
As Lee said, you missed giving an ID to the img. Also, you closed your change() function a little early, so it would never get to the second if.
function change() {
document.getElementById("bob").src = imgs[++x];
if (x == 1) {
x = -1;
}
//} Moved from here
if (!imgs[x + 1]) {
x = -1;
}
}
working here: edited jsfiddle