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';
Related
This question already has answers here:
Show/Hide Requires a Double-click
(2 answers)
Closed 2 years ago.
Like in the topic. After clicking empty gear (norm) I want to make it change to filled (hov) and show up div (show), but it doesn't work.
Before using ifs everything was working, so there must be something wrong with them.
js:
function list() {
if (document.getElementById('hov').style.display === 'none') {
document.getElementById('norm').style.display = 'none';
document.getElementById('hov').style.display = 'flex';
document.getElementById('show').style.display = 'grid';
}
if (document.getElementById('hov').style.display === 'flex') {
document.getElementById('norm').style.display = 'flex';
document.getElementById('hov').style.display = 'none';
document.getElementById('show').style.display = 'none';
}
}
html:
<button class="men" onclick="list()"><img id="norm" src="img/gearw.png" height="28px"><img id="hov" src="img/gearwhover.png" height="28px"></button>
Did you write link to JQuery?
write <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> into the end of the body, but before body. If it doesn't work, sorry( I can't give another advice
I think you have a bit of a misunderstanding of what display does (you can read up on it here: https://www.w3schools.com/cssref/pr_class_display.asp). Setting it to none won't make it invisible. Instead, you could use visibility.
For example:
function list() {
var norm = document.getElementById("norm");
var hov = document.getElementById("hov");
if (hov.style.visibility === "hidden") {
norm.style.visibility = "hidden";
hov .style.visibility = "visible";
} else if (hov.style.visibility === "visible") {
norm.style.visibility = "visible";
hov .style.visibility = "hidden";
}
}
<button class = "men" onclick = "list()">
<img id = "norm" src = "img/gearw.png" height = "28px">
<img id = "hov" src = "img/gearwhover.png" height = "28px" style = "visibility: hidden">
</button>
Other than that, your code seems very weird (your JS talks about a "show" element that's not in your HTML document?), and its not quite clear from the question what you're trying to accomplish. There probably is a much more elegant way to do what you want, but without telling us, we can't know.
If I were to guess, I'd say that you were trying to make the image on the button change when the user hovers over it, in which case you'd probably be better off using CSS for that, but again I can't know for sure.
Anyways, I wish you the best of luck in your project!
I'm learning javascript, and this simple piece of code just won't work the way I need it to.
All I need is to display the main tag at the click of a button. HOWEVER, it doesn't want to display until the SECOND click.
So the first click doesn't display the main. The second click does.
I've tried moving my coding around the html document (before/after body closing tag, etc).
I've looked through stack overflow, and similar questions don't really help my case. Or at least I don't understand how they can help me as a beginner.
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
main{display:none;}
<main> ... </main>
<button type="button" id="aboutLink">About</button>
There has to be something I'm missing that prevents that 1st click from firing the code. I mean, it seems simple enough???
if (mainSection.style.display === "none") is looking for an inline style tag, so instead of setting display:none; in your CSS, just set it inline on the element:
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
<main style="display:none;"> ... </main>
<button type="button" id="aboutLink">About</button>
As has been answered, mainSection.style.display is empty. Another option is to get the computed style of the element:
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain() {
var mainSection = document.getElementsByTagName("main")[0];
if (window.getComputedStyle(mainSection).getPropertyValue('display') === "none") {
mainSection.style.display = "grid";
} else {
mainSection.style.display = "none";
}
}
main {
display: none;
}
<main> ... </main>
<button type="button" id="aboutLink">About</button>
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display || "none" === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
main{display:none;}
<main>text</main>
<button type="button" id="aboutLink">About</button>
Initially mainSection.style.display is empty, so it falls on the else part of the if statement and changes the property to none.
On the second click, the property now has the value of none, that's why it works on the second click.
The HTMLElement.style property is used to get as well as set the inline style of an element.
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';
}
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