I ran into a problem in a practice project
Inside the #java_script code to open and close a subcategory; I wrote some code, but the problem I have is that the first time I click on the location, which is activated with "On click"; When I click, it does not show any reaction
But the next time the problem will be completely solved until the page is refreshed again
And this problem exists for both "On click" that I have written so far separately
I put the javascript code and its github address; Thank you for your guidance
GitHub address:
https://github.com/A7337li/Demo-DigiKala
Javascript code text:
const $ = document;
function myfunction(colorText, subset, angleDown, angleUp) {
let angleD = $.querySelector(angleDown).style.display;
if (angleD == "inline") {
$.querySelector(colorText).style.color = "red";
$.querySelector(subset).style.display = "inline";
$.querySelector(angleDown).style.display = "none";
$.querySelector(angleUp).style.display = "inline";
} else {
$.querySelector(colorText).style.color = "black";
$.querySelector(subset).style.display = "none";
$.querySelector(angleDown).style.display = "inline";
$.querySelector(angleUp).style.display = "none";
}
}
Finally, I was able to solve the problem myself
The problem was solved by changing the condition of "if" and moving the content of "if" and "else".
Modified code from the code above:
if (angleD == "none") {
$.querySelector(colorText).style.color = "black";
$.querySelector(subset).style.display = "none";
$.querySelector(angleDown).style.display = "inline";
$.querySelector(angleUp).style.display = "none";
} else {
$.querySelector(colorText).style.color = "red";
$.querySelector(subset).style.display = "inline";
$.querySelector(angleDown).style.display = "none";
$.querySelector(angleUp).style.display = "inline";
}
In the previous code, the condition in "if" was true, so "if" was executed first and then "else"; But in the performance, I would face the problem I said.
But with the new changes and shifting of "if" and "else" content and "if" conditions;
It is executed quickly without any conditions, and from the place where the "if" condition is fulfilled in the contents of the "else", it is executed with the second click of the "if";
Related
I have a div that I can show with js, but I can't seem to close. Using if .... else if...
For example:
<a id="downgrade" onclick="showDowngradeDiv()" href="javascript:void(0)"><h1>Downgrade ▼</h1></a>
<div id="downgrade-text">
<h2>text</h2>
<p>A paragraph of text</p>
</div>
function showDowngradeDiv() {
const DowngradeDiv = document.getElementById("downgrade-text");
if (DowngradeDiv.style.display = "none") {
DowngradeDiv.style.display = "block";
}
else if (DowngradeDiv.style.display = "block") {
DowngradeDiv.style.display = "none";
alert("test");
}
}
#downgrade-text {
display: none;
}
If anyone has any idea, let me know because I don't know what I'm doing wrong here right now.
You are assigning the display property at the if/else. Please use the double equal sign operator.
if (DowngradeDiv.style.display = "none")
if (DowngradeDiv.style.display == "none")
Funnily enough, just messed around with js and ended up doing this and somehow it's working?
function showDowngradeDiv() {
const DowngradeDiv = document.getElementById("downgrade-text");
if (DowngradeDiv.style.display == "block") {
DowngradeDiv.style.display = "none";
}
else {
DowngradeDiv.style.display = "block";
DowngradeDiv.scrollIntoView({behavior: "smooth"});
}
}
but if I were to switch the statements around and say if Downgrade.style.display == "none" then change it to block and scroll to it else set display to none. That wouldn't work for some reason, but flipping it seems to have gotten me what I wanted functionally.
I have this two images that trigger the same function. What the function does is showing/hiding one of the images and then i added some extra code to show/hide a menu, that i haven´t included.
function menu() {
var b = document.getElementById("burger");
var c = document.getElementById("close");
if (b.style.display === "block") {
b.style.display = "none";
c.style.display = "block";
} else {
b.style.display = "block";
c.style.display = "none";
}
}
<img src="img/burger-white.png" id="burger" onclick="menu()" alt="img1">
<img src="img/close-white.png" id="close" onclick="menu()" alt="img2">
Everything works as intended, except for the first time i click on the image, when it does nothing.
It looks like the display for burger is not initially set to block. Try loading the page and inspect it with chrome. There you should see, when the page is loaded, if it initially have the expected css style.
A workaround, would be to add a function that will set the display of the element with id #burger to "block", if the window size is less that a 1100px.
function setDisplay() {
var width = window.innerWidth;
var b = document.getElementById("burger");
if(width <= 1100) {
b.style.display = "block";
}
}
document.getElementById("SameDifferent").addEventListener('click',function () {
start(game.SameDifferent);
document.getElementById("instructions").innerHTML = "Press S for 'same' and D for 'different'";
} );
So right now, when I click toggle the function to start the game, I have instructions appear by changing the innerHTML in my html file. I want two buttons to pop up instead, however, that say "Same" and "Different". I'm almost a complete beginner at HTML/Javascript, so not sure how to do this. I can make the button appear constantly, but I am confused on how to toggle it in the js file.
Any help would be appreciated. Thanks!
You can try to set the button to hidden like below:
document.getElementById("button1").style.display = "none";
To show:
document.getElementById("button1").style.display = "";
Hi consider this HTML:
<button onclick="toggle()">Click Me</button>
<div id="tggle">
This is my DIV element.
</div>
It displays a button (toogle), that shows the div with ID tggle, here's the javascript to toggle it:
function toggle() {
var x = document.getElementById("tggle");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I'm getting this error:
Error: Unclosed element `container.style.display` (on line 25).
Line 25 of my program is:
if ((container.style.opacity -= .01) <= 0)
But I think it's referring to the line below:
container.style.display = "none";
Why am I getting this error?
The context:
<script>
var container = document.getElementById('popUpContainer');
function popUpFadeOut() {
if (container.style.opacity == 0) {
container.style.opacity = 1;
container.style.display = "block";
var fading = function fade() {
if ((container.style.opacity -= .01) <= 0) {
container.style.display = "none";
container.style.opacity = 0;
} else {
requestAnimationFrame(fade);
}
};
setTimeout(fading, 1000); //popup box fades away after 1 seconds
}
};
</script>
The error message you mention comes in an HTML parsing context, most likely HTMLBars, meaning you are including a script in a template, which you shouldn't be doing in the first place.
The quick fix is to replace < with <. The correct solution is to move the script from the template into a JS file where it belongs.
Note that this would not be a problem in an HTML file, because script tags (today) are "protected", and the only HTML inside of that that could cause a problem is something like const foo = "</script>";. It appears that the HTML parsing login in HTMLBars does not implement this "protection" mechanism. In theory this could be considered a bug, but no-one has ever worried about it, and no-one will ever fix it, because you shouldn't put script tags in templates anyway.
I've got a setup of multiple images stacked on top of each other (image1 = normal icon, image2 = highlighted icon).
My objective is to highlight the icon, do processing, then set the icon back to normal. Also, to process as fast as possible. The bottleneck is the workarounds to get the "highlight" to show up.
To accomplish this, I'm just switching the
.style.visibility = {"hidden", "visible"}
The behavior that I'm seeing is that only the latest style is shown, and it doesn't update until the function exits. From my research on SO, I've found the following:
Toggle the .style.visibility or .style.display off and on to force a redraw
Didn't see the correct behavior. Only the latest update shown
Use setTimeout(callback, 0) or setInterval(callback, 0)
Behaves as expected. However, due to the browser enforced "minimum wait time", the code is not executing as fast as I need it to.
The setInterval() function implementation requires that the function is called twice to perform one operation (once to highlight, second time to process then unhighlight)
I can upload code if necessary
I've attached a quick sample code to demonstrate that only the last style is shown
<!doctype html>
<head>
<title>test redraw</title>
</head>
<body>
<img id="logo"
src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Red dot from wikipedia" /></img>
<script>
function pausecomp(ms) {
ms += new Date().getTime();
while (new Date() < ms) {
}
}
function hide_then_show() {
var id = document.getElementById("logo");
pausecomp(1000);
id.style.display = "none";
id.parentNode.style.display = "none";
id.parentNode.style.display = "block";
pausecomp(1000);
id.style.display = "block";
id.parentNode.style.display = "none";
id.parentNode.style.display = "block";
}
window.addEventListener("click", hide_then_show());
</script>
</body>
</html>
Any suggestions would be appreciated. I don't know if I'm approaching this the best way
I've a doubt you're not using setTimeout() correctly. Here's how you can make this work.
function hide_then_show() {
var id = document.getElementById("logo");
setTimeout(function () {
id.parentNode.style.display = "none";
setTimeout(function () {
id.parentNode.style.display = "block";
}, 1000); // Hiding time
}, 1000); // Delay between click and hide
}
window.addEventListener("click", hide_then_show, false);
A working demo at jsFiddle. You can play with the fiddle and adjust delays, you'll see, how fast you can switch the image display.
If you need a blinker, you can check this fiddle.