We Keep Coding

how to hide and show sidenavbar in javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 1 year ago.
Improve this question
javascript
as see in the js code I m trying the method but I'm struggling to do it js code is not working as well smoothly what I want to write this code and run I m so stuck lots of time to try
var menu = document.getElementById('menu');
var sidenav = document.getElementById('sidenav');
sidenav.style.right = "-300px";
menu.onclick = function () {
if (sidenav.style.right = "-300px")
sidenav.style.right = "0px"
}
else {
sidenav.style.right = "-300px"
}`enter code here`

You need to use == instead of =, and the else need to be inside the function
var menu = document.getElementById('menu');
var sidenav = document.getElementById('sidenav');
sidenav.style.right = "-300px";
menu.onclick = function () {
if (sidenav.style.right == "-300px")
sidenav.style.right = "0px"
else
sidenav.style.right = "-300px"
}
When you use = you change the variable at the left term to the value of the right term, when you use == you check if the terms at each side are equals.

First off, whatever element you want to move needs to have a css position attribute. For example
#sidenav {
position: relative
}
Also here is a rewrite of your code
var menu = document.getElementById('menu');
var sidenav = document.getElementById('sidenav');
sidenav.style.right = "-300px";
menu.onclick = function () {
if (sidenav.style.right == "-300px") {
sidenav.style.right = "0px"
}
else {
sidenav.style.right = "-300px"
}
Note the curly brace that was in front of your if statement

Javascript column resizing only working when page is refreshed

Hi — I've inherited a website that has a little javascript script that isn't working properly. I didn't code it myself and am a javascript n00b, so please forgive my ignorance.
The site switches from 3-column view to 1-column view depending on window size, and there's a script to make one particular section of the site convert neatly between the two views (by setting the column heights such that they stack neatly). I've noticed that if I resize the window without refreshing, the column heights fail to adjust. How can I fix this?
Thanks!
<script type="text/javascript">
function adjust_col_heights() {
if (window.innerWidth > 991) {
var col_1_height = document.getElementById('col-1').clientHeight;
var col_2_height = document.getElementById('col-2').clientHeight;
var col_3_height = document.getElementById('col-3').clientHeight;
console.log("adjusting heights from:", col_1_height, col_2_height, col_3_height);
var col_max_height = Math.max(Math.max(col_1_height, col_2_height), col_3_height);
var css_height = col_max_height + "px";
document.getElementById('col-1').style.height = css_height;
document.getElementById('col-2').style.height = css_height;
document.getElementById('col-3').style.height = css_height;
document.getElementById('poem').style.position = "absolute";
}
else {
document.getElementById('poem').style.position = "relative";
}
}
adjust_col_heights();
window.onresize = adjust_col_heights;
</script>

window.onload = function () {
resizeElements();
window.addEventListener('resize', resizeElements);
}
function resizeElements() { ... }

setting javascript element background image to equal a download url [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to give a javascript element a background image. This url is stored in a database and is not a string but a file path: https://firebasestorage.googleapis.com/v0/b/fir-firebase-182ca.appspot.com/o/images%2FScreenshot%20(2).png?alt=media&token=0edf4c43-e791-48b1-b2f4-b8ec5e65e296
I am also making a java script element, which is a div, to set its background image to this link:
var icon = document.createElement('img');
icon.style.cssText = "background-color: red;"
//icon.src = "'" + url + "'";
var parent = document.getElementById("loggedDisplay");
parent.appendChild(icon);
I havent been able to get this to work so far. How would I make this background image = the url

Try this,
document.getElementById("Your div ID").style.backgroundImage = "url('https://firebasestorage.googleapis.com/v0/b/fir-firebase-182ca.appspot.com/o/images%2FScreenshot%20(2).png?alt=media&token=0edf4c43-e791-48b1-b2f4-b8ec5e65e296')";

You can use style object directly too. But for css background you need to put the image url in a "url('')"
function myFunction() {
var imagePath = "https://firebasestorage.googleapis.com/v0/b/fir-firebase-182ca.appspot.com/o/images%2FScreenshot%20(2).png?alt=media&token=0edf4c43-e791-48b1-b2f4-b8ec5e65e296";
var icon = document.createElement('img');
icon.style.backgroundColor = "red";
//icon.src = imagePath ;
icon.style.backgroundImage = "url('" + imagePath + "')";
var parent = document.getElementById("loggedDisplay");
parent.appendChild(icon);
}
#loggedDisplay img {
display: block;
width: 100%;
height: 300px;
}
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<div id="loggedDisplay"></div>
</body>
</html>

How to create and style div on JavaScript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I am attempting to use the onclick on the button to call the function complete which should create a div with the below mentioned attributes. However, when I tried to run it, I saw no output display. I have tried a bunch of things but am currently unsure. Any help would be much appreciated
<!DOCTYPE html>
<html>
<button id ="button1" type="button" onclick="complete()">Run</button>
<script>
function complete(){
var x= Math.floor(Math.random()*501)
var y=Math.floor(Math.random()*501)
var divx = document.createElement("div");
divx.style.position = "fixed";
divx.style.bottom = (150+x).toString();
divx.style.right = (900+y).toString();
divx.style.background="green";
divx.style.width = "10px";
divx.style.height = "10px";
divx.style.border = "1px solid #000";
document.body.appendChild(div);
}
</script>
</html>

document.body.appendChild(div); should be document.body.appendChild(divx); Because div is undefined
<!DOCTYPE html>
<html>
<body>
<button id="button1" type="button" onclick="complete()">Run</button>
<script>
function complete() {
var x = Math.floor(Math.random() * 501)
var y = Math.floor(Math.random() * 501)
var divx = document.createElement("div");
divx.style.position = "fixed";
divx.style.bottom = (150 + x).toString();
divx.style.right = (900 + y).toString();
divx.style.background = "green";
divx.style.width = "10px";
divx.style.height = "10px";
divx.style.border = "1px solid #000";
document.body.appendChild(divx);
}
</script>
</body>
</html>

The error :
document.body.appendChild(div); should be document.body.appendChild(divx);
Suggestion :
While not incorrect, you shouldn't use onclick="complete()" in your HTML. It's much better to attach an event listener using addEventListener("click", complete, false) in your JS code instead.
Improved code :
function complete(){
var x= Math.floor(Math.random()*501)
var y=Math.floor(Math.random()*501)
var divx = document.createElement("div");
divx.style.position = "fixed";
divx.style.bottom = (150+x).toString();
divx.style.right = (900+y).toString();
divx.style.background="green";
divx.style.width = "10px";
divx.style.height = "10px";
divx.style.border = "1px solid #000";
document.body.appendChild(divx);
}
document.getElementById('button1').addEventListener("click", complete, false);
<button id ="button1" type="button">Run</button>
(see also this Fiddle)

Your code works fine, you're missing just to add x after div in :
document.body.appendChild(div);
Should be :
document.body.appendChild(divx);
Because variable div is not defined, also you should put your code inside <body> tag for the valid HTML code.
Hope this helps.
<!DOCTYPE html>
<html>
<body>
<button id ="button1" type="button" onclick="complete()">Run</button>
<script>
function complete(){
var x= Math.floor(Math.random()*501)
var y=Math.floor(Math.random()*501)
var divx = document.createElement("div");
divx.style.position = "fixed";
divx.style.bottom = (150+x).toString();
divx.style.right = (900+y).toString();
divx.style.background="green";
divx.style.width = "10px";
divx.style.height = "10px";
divx.style.border = "1px solid #000";
document.body.appendChild(divx);
}
</script>
</body>
</html>

Your line document.body.appendChild(div); uses an undefined variable div, you named your div xdiv instead, so use that as parameter.
Remember that most browsers support a console, usually accessible through F12, which shows error messages triggered by JavaScript. In your case it shows:
test.html:16 Uncaught ReferenceError: div is not defined
It's a great idea to check that error log when something misbehaves, often it tells exactly what's wrong including the line number.
You also have to append the unit as a string when setting the two offsets (bottom and right), probably px. For example:
divx.style.bottom = (150+x).toString() + "px";

Javascript "onclick" attribute on button automatically running [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm using a for loop to dynamically name and fill buttons (with text and with code). One thing I had a problem with was dynamically allocating onclick functionality to the buttons, but I seemed to have fixed it with:
document.getElementById(ID_HERE).onclick = FUNCTION();
The problem is when I add this code, the buttons trigger themselves on the load of the webpage instead of the click.
I put the full code below for both the HTML and the Javascript.
JavaScript:
var routes = "";
var elem = "";
var locationid = "50017"
var currentRoute = "the Londinium Way"
function possibleRoutes(){
document.write("<div id='container'>");
document.write("<center><b> Welcome to ");
document.write(currentRoute);
document.write("!<br>")
document.write("Your options are:");
for (i = 0; i<routes.length;i++){
var options = routes[i];
var temp = "button" + i
document.write("<button id='button'></button>");
document.getElementById('button').id = temp;
document.getElementById(temp).innerHTML=routes[i][0];
document.getElementById(temp).onclick = getRoutes(routes[i][1]);
console.log(routes[i]);
console.log(routes[i][1]);
}
document.write("<br><img src='http://192.168.1.151:8000/map.jpg'>");
document.write("</b></center></div>");
}
function getRoutes(locationid) {
var routesURL = 'http://cors.io/?u=http://orbis.stanford.edu/api/sites/' + locationid;
$.ajax({
type: 'GET',
url: routesURL
}).done(function(data) {
console.dir(data);
dataParsed = JSON.parse(data);
currentRoute = dataParsed.prefname;
routes = dataParsed.routes;
console.log(routes);
clearScreen();
});
}
function clearScreen(){
if (document.contains(document.getElementById("container"))){
elem = document.getElementById("container");
elem.remove();
}
possibleRoutes();
}
HTML:
<html>
<head>
<title> Londinium Trail </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://192.168.1.151:8000/scripts/game.js"> </script>
</head>
<body>
<script>
getRoutes(50017);
</script>
</body>
</html>

JAVASCRIPT
Try to use addEventListener instead :
document.getElementById(ID_HERE).addEventListener("click", myFunction);
JQUERY
If you're using jquery :
$('body').on('click', '#ID_HERE', myFunction);
Take a look at addEventListener vs onclick.
Hope this helps.

The issue is that you are calling the function by using FUNCTION();
Since your code appears to be using JQuery, consider using the .on method to attach a click listening:
$(document).on('click', '#ID_HERE', function(){
function_to_run();
});