Develop Reference

How to set a JS variable from a CSS style

I've made a bunch of JavaScript functions to show, hide and populate various elements on a zooming menu. All seem to working except for one which I need the function to only run if a CSS setting is a specific value (width of 195%). I am very new to JavaScript so there may be more than one issue here.
<script>
function zoomShowF2() {
var widthNow = document.getElementById('svg1').style.width;
if widthNow = '195%' {
document.getElementById('zoomTitle').style.display = 'flex';
else
document.getElementById('zoomTitle').style.display = 'none';
}}</script>

You need to use comparison operators write the if statement as follows
if (widthNow == '195%') {
as the single = is assigning the value not comparing it

There are a few issues with your syntax:
function zoomShowF2() {
var widthNow = document.getElementById('svg1').style.width;
if (widthNow === '195%') {
document.getElementById('zoomTitle').style.display = 'flex';
} else {
document.getElementById('zoomTitle').style.display = 'none';
}
}

Thanks everyone. It works now with a combination of the changes suggested. I assume my curly braces are all in 'tidy' positions?
EDIT. I've adjusted the curly brace positions to as per Ed's layout.
Thanks all!

Your code does not called when the element changes it size or width. You must put all your code inside window.onresize event.
var displayOutput = document.getElementById("display-option");
function reportWindowSize() {
displayOutput.text = document.getElementById("element-to-check").style.width;
}
window.onresize = reportWindowSize;
<p id="element-to-check">Resize the browser window to fire the <code>resize</code> event.</p>
<p>Display: <span id="display-option"></span></p>

Javascript – PNG not showing when adding dynamically

I’m a beginner JS coder and I’m struggling with the following – can anyone please help?
I’m trying to add a series of PNGs to a page using a function which will allow the placement of multiple copies of the same image and also assign a unique reference to each copy of the image.
The images are not showing in the page, plus the console.log() shows that the 2 images created by the code below both have the same position on the page.
var imgSrc = 'arrow_red.png';
function generateArrow(numArrows) {
var img = document.createElement('img');
img.src = imgSrc;
for (i = 1; i <= numArrows; i++) {
window['arrow'+i] = img;
}
}
generateArrow(2);
arrow1.style.position = 'absolute';
arrow1.style.top = '50px';
arrow1.style.left = '50px';
arrow2.style.position = 'absolute';
arrow2.style.top = '100px';
arrow2.style.left = '100px';
console.log(arrow1);
console.log(arrow2);
Why are the images not showing in the page and why does the console.log() show that the 2 images created are both using the same positional co-ordinates?

When you create a new element, it only exists in memory - - it hasn't been added to the document that the browser is currently rendering. So, it's not enough to create new elements and configure them. You must then inject them into the DOM with parentElement.appendChild(newChild).
Here's an example:
let newChild = document.createElement("img");
newChild.src = "https://static.scientificamerican.com/sciam/cache/file/D14B1C22-04F8-4FB4-95937D13A0B76545.jpg?w=590&h=393";
let parent = document.querySelector(".parent");
parent.appendChild(newChild); // <-- Now, inject the new element
img { width: 400px; }
<div class="parent"></div>
Now, in your particular case, you've got more issues than just this to work on. You are only creating a new image element one time because your line that does that is not inside of your loop. Also, the way you are referring to arrow1 and arrow2 in your code and with window['arrow' + i] indicates that you have img elements with ids already set up in your HTML, which is not an ideal approach. Next, it's much simpler to set up the CSS you'll want to work with as pre-made classes ahead of time, rather than setting up the CSS as inline styles in the script.
As my answer above indicates, you need to have a parent element that will contain the new element(s) that you create, so your solution would really look something like this:
var imgSrc = 'https://icon2.kisspng.com/20180320/rle/kisspng-arrow-computer-icons-clip-art-red-arrow-line-png-5ab19d059bfa98.5843437015215895096389.jpg';
// You can pick any pre-existing element to be the "parent"
var parent = document.getElementById("parent");
function generateArrow(numArrows) {
for (i = 1; i <= numArrows; i++) {
// The creation of the elementt and it's configuration
// need to be inside of the loop to make several of them
var img = document.createElement('img');
img.classList.add("position" + i); // Add pre-made CSS classes
img.src = imgSrc;
parent.appendChild(img); // Inject the new element inside of the parent
}
}
generateArrow(5);
/*
Instead of setting inline styles, use pre-made CSS classes
that you can just connect or disconnect to/from
*/
/* All the injected images get this: */
#parent > img { width:40px; position:absolute; }
/* These get assigned individually */
.position1 { top:50px; left:50px; }
.position2 { top:100px; left:100px; }
.position3 { top:150px; left:150px; }
.position4 { top:200px; left:200px; }
.position5 { top:250px; left:250px; }
<div id="parent"></div>

You usually add elements to DOM using document.appendChild(element);, or in your case: document.appendChild(img);. (Or any preferred parent instead of document)
Edit: removed second part addressing variable declaration, since I didn't notice the window["arrow" + i] = img.

You need to add the generated element to the DOM using the appendChild() method.
Furhermore you're actually just generating a single instance of the image because it's happening once outside of the for-loop. This is why the console shows identical screen positions for 'both' images because actually you're referring to the same image instance.
Try this:
function generateArrow(numArrows) {
var img;
for (i = 1; i <= numArrows; i++) {
img = document.createElement('img');
img.src = imgSrc;
document.body.appendChild(img);
window['arrow' + i] = img;
}
}

How do i use 'cssText' in javascript?

I got an error message
"Uncaught TypeError: Cannot set property 'cssText' of undefined"
My Code:
var div = $('.postImg2')
var img = $('.postInner2');
var divAspect = 20 / 50;
var imgAspect = img.height / img.width;
if (postData.files != null) { // if attached images or videos exist
for (var i = 0; i < postData.files.length; i++) {
if(postData.files.length == 1){
postView = postView + "<div class='postImg1'><img class='postInner1' src='img_timeline/" + postData.files[i].url + "'></div>"
} else if(postData.files.length == 4){
if(imgAspect <= divAspect){
var imgWidthActual = div.offsetHeight / imgAspect;
var imgWidthToBe = div.offsetHeight / divAspect;
var marginLeft = -Math.round((imgWidthActual-imgWidthToBe)/2);
postView = postView + "<div class='postImg2'><img class='postInner2' src='img_timeline/" + postData.files[i].url + "'></div>"
img.style.cssText = 'margin-left:'+marginLeft+'px;'
} else {
img.style.cssText = 'margin-left:0;'
}
} else if (postData.files.length > 4){
postView = postView + "<div class='postImg3'><img class='postInner3' src='img_timeline/" + postData.files[i].url + "'></div>"
}
}
}
How do I use cssText in javascript?

The problem you have is you have a jQuery object and you act like it is DOM.
img.get(0).style.cssText = 'margin-left:0;'
//or
img[0].style.cssText = 'margin-left:0;'
but why use cssText? Seems better to do
img[0].style.marginLeft = "0px";
or since you are using jQuery
img.css("marginLeft", "0px")
And after that is complete it still will not work. The reason is the fact you are selecting the element before it is added to the page. The $('.postInner2'); is not going to pick up the image you added to the page in the loop since you select it before it is added. In reality you can not update the widths and select the elements until you append postView to the page.

Replace this
img.style.cssText = 'margin-left:'+marginLeft+'px;'
With this
img.css('margin-left',marginLeft+'px')

Here is a really basic example of how cssText works. I suspect your img variable is not set or is referencing a non-existant element.
Whatever the case, img.style is undefined.
Update To show how you could do this in jQuery (but why are you not using .css or .attr rather than mixing and matching pure JS with jQuery) ?
var img = $('.postInner2');
// Get the first element from the jQuery array and apply a style with cssText.
img[0].style.cssText = "width:100px;";
/**
* A better solution would be ".css" because it will apply to
* ALL elements with class .postInner2 without having to loop
*/
// $(".postInner2").css({width:"100px", marginLeft: "10px"});
/**
* Or if you have to override everything in the class:
*/
// $(".postInner2").attr("css","width:100px;margin-left:10px");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="postInner2" src="//placehold.it/400x200" alt="Placeholder" />
Edit2: actually, based on your updated code it looks like there is no way it can work. You are trying to fetch and manipulate your image before it even exists in the DOM, for example: div.offsetHeight / divAspect where the actual div is actually only described on the next line, and not ever added into the HTML anywhere.
I think you are going to have to re-think the flow of logic in your code.

get property (width) from one element and assign to another one

I am trying to get the width property from one element and assign to another.
Here's my code (that does not work):
window.onload=function() {
var morphWidth = document.getElementById('morph').width();
var scrollbar = document.getElementById('scrollbar');
scrollbar.style.width = morphWidth + "px";
}

You can get the element width:
document.getElementById("morp").style.width;
and you can set the element width:
document.getElementById("morph").style.width="300px";

Okay, so I tried this and that and finally found a solution:
$(function() {
var morphWidth = $('#morph').width();
var scrollbar = $('#scrollbar');
$('#scrollbar').css('width', morphWidth + 'px');
});
However, I don't have a clue why this works now. Let me know if you do!

If you use jQuery, then you can code like this:
var morphWidth = $('#morph').width();
If you use original Javascript, the you can code like this:
var morphWidth = document.getElementById('morph').offsetWidth;
jQuery object is different from DOM (Document Object Model).
The var scrollbar as same as.

Cannot remove a div in Javascript

I'm trying to remove a div in Javascript but 'its not working. I get no error in my console yet the function does get called.
I don't understand what I have done wrong, so I'm hoping someone can explain. This is how it works:
function menu_load(type){
document.getElementById(type).onclick = function(){ menu_unload(type); }
var width = 100;
var height = 100;
var d = document.createElement('div');
d.id = 'menu';
d.className = 'menu';
d.style.width = width + 'px';
d.style.height = height + 'px';
document.getElementById('G').appendChild(d);
}
function menu_unload(type){
alert('test'); //this displays
var div = document.getElementById("menu");
div.parentNode.removeChild(div); // doesn't remove the div
document.getElementById(type).onclick = menu_load(type);
}
window.onload = function(){
menu_load('test');
}
Is there any mistake here that I have missed? I just can't work out the problem.

Your code works for me if I correct the following line:
document.getElementById(type).onclick = menu_load(type);
Which incorrectly calls menu_load() and tries to assign the result to .onclick. It should be like you did in the other function
document.getElementById(type).onclick = function() { menu_load(type); };
Demo: http://jsfiddle.net/MCZza/
To be honest I don't know why this fixes it, since your code wasn't actually a syntax error, but because it called menu_load() it recreated the div just removed. and the .removeChild() line should happen first, but anyway...