This question already has answers here:
If I set `let x = document.getElementById("inputText").value` and update `x`, why doesn’t the value update?
(12 answers)
Closed 12 months ago.
Can someone explain why this
x = document.getElementById('bob').style.display;
x = 'hidden';
doesn't work
but
x = document.getElementById('bob');
x.style.display = 'hidden';
works?
So the reason behind this is that in the first example x will return a string value of the display, and changing that will only change the string in you JS code. Whereas in the second example x = to a refrence to and HTML object in the DOM. Changing this variables properties will make a change in the DOM, because it is an HTML element, and not a string.
Related
This question already has answers here:
jQuery not getting current data values
(4 answers)
JQuery .data() not working?
(2 answers)
Closed 1 year ago.
How do I set a data attribute with native js so it is picked up with jquery? I have tried using setAttribute, but that only works for the first occasion an any updates aren't picked up:
var iframeHolder = document.getElementById('test');
iframeHolder.setAttribute('data-test', 5);
var $iframe = $('#test');
console.log($iframe.data('test'));
iframeHolder.setAttribute('data-test', 6); // this doesn't seem to update the underlying data attribute
console.log($iframe.data('test'));
iframeHolder.dataset.test = 6; // neither does this
console.log($iframe.data('test'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">inspect to see attribute updates</div>
Please note, I need to use native js as it is in an iframe that doesn't use jquery (but sets the data attribute in the parent window which does use jquery)
This question already has answers here:
Get div height with plain JavaScript
(13 answers)
Closed 5 years ago.
https://jsfiddle.net/h2nhb5ah/2/
Does anyone know why my variable scrollratio isn't taking on the correct value (ie the ratio of height of div#left to div#right)?
If the variable scrollratio is exchanged for a number then the code works, but the variable itself does not seem to.
Ideally I would also like to figure out a way to use body.style.height instead of the 8.
To get the height of an element, use the clientHeight property:
var scrollratio = document.getElementById('right').clientHeight / menu.clientHeight;
// => 2.051948051948052
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 7 years ago.
I am creating input tag with it's attributes by clicking on list item. Type, name and id are created successfully but it's not generating the class attribute.
var createInput = document.createElement("input");
createInput.type = "text";
createInput.name = text1;
createInput.id = text1;
createInput.class = "abc";
The class property of a DOM Element is actually called className:
createInput.className = "abc";
Check out your browser's Debug Console (F12); it has auto-completion, so you can see what properties exist.
This question already has answers here:
Replace method doesn't work
(4 answers)
Closed 7 years ago.
My app read DOM object's attribute value. I want this value to be swapped with some new texts and put back to attribute. The original value is:
"position: absolute; background-image: url(\"http://dealer.raymarine.com/Views/Public/ShowImage.ashx?partno=M81203&view=thumb\")";
but when it should be updated with JS replace method, but nothing is changed, why?
Updating JS code:
var styleValue = ui.helper[0].getAttribute("style");
styleValue.replace("raymarine", "XXX");
styleValue.replace("ShowImage", "ShowImageSystemCreator");
styleValue.replace("view=thumb", "view=png");
ui.helper[0].setAttribute("style", styleValue);
console.log("draggable after text swap: " + styleValue);
You're not saving the value anywhere!
styleValue = styleValue.replace("raymarine", "XXX");
styleValue = styleValue.replace("ShowImage", "ShowImageSystemCreator");
styleValue = styleValue.replace("view=thumb", "view=png");
Make it a one-liner if you want by stringing replaces:
styleValue = styleValue.replace("raymarine", "XXX").replace("ShowImage", "ShowImageSystemCreator").replace("view=thumb", "view=png");
This question already has answers here:
Replace method doesn't work
(4 answers)
Closed 8 years ago.
I followed some documentation to use the JavaScript replace function and it's not changing anything. No errors are thrown. Any idea what I'm doing wrong? The variable is retrieved from XML - maybe it needs to be cast as a string or something?
for (var i = 0, iln = projects.length; i < iln; i++){
var thumb = projects[i].get('thumb');
thumb.replace("200.jpg", "640.jpg");
console.log(thumb) //200.jpg not replaced
}
The full thumb value should look like this:
http://b.vimeocdn.com/ts/160/895/160895498_200.jpg
Is there a better way to find and replace things?
Assign the value back into thumb.
thumb = thumb.replace("200.jpg", "640.jpg");
Try:
thumb = thumb.replace("200.jpg", "640.jpg");