Related
Has a best-practice around using setAttribute instead of the dot (.) attribute notation been developed?
E.g.:
myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");
or
myObj.className = "nameOfClass";
myObj.id = "someID";
From Javascript: The Definitive Guide, it clarifies things. It notes that HTMLElement objects of a HTML doc define JS properties that correspond to all standard HTML attributes.
So you only need to use setAttribute for non-standard attributes.
Example:
node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works
None of the previous answers are complete and most contain misinformation.
There are three ways of accessing the attributes of a DOM Element in JavaScript. All three work reliably in modern browsers as long as you understand how to utilize them.
1. element.attributes
Elements have a property attributes that returns a live NamedNodeMap of Attr objects. The indexes of this collection may be different among browsers. So, the order is not guaranteed. NamedNodeMap has methods for adding and removing attributes (getNamedItem and setNamedItem, respectively).
Notice that though XML is explicitly case sensitive, the DOM spec calls for string names to be normalized, so names passed to getNamedItem are effectively case insensitive.
Example Usage:
var div = document.getElementsByTagName('div')[0];
//you can look up specific attributes
var classAttr = div.attributes.getNamedItem('CLASS');
document.write('attributes.getNamedItem() Name: ' + classAttr.name + ' Value: ' + classAttr.value + '<br>');
//you can enumerate all defined attributes
for(var i = 0; i < div.attributes.length; i++) {
var attr = div.attributes[i];
document.write('attributes[] Name: ' + attr.name + ' Value: ' + attr.value + '<br>');
}
//create custom attribute
var customAttr = document.createAttribute('customTest');
customAttr.value = '567';
div.attributes.setNamedItem(customAttr);
//retreive custom attribute
customAttr = div.attributes.getNamedItem('customTest');
document.write('attributes.getNamedItem() Name: ' + customAttr.name + ' Value: ' + customAttr.value + '<br>');
<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
2. element.getAttribute & element.setAttribute
These methods exist directly on the Element without needing to access attributes and its methods but perform the same functions.
Again, notice that string name are case insensitive.
Example Usage:
var div = document.getElementsByTagName('div')[0];
//get specific attributes
document.write('Name: class Value: ' + div.getAttribute('class') + '<br>');
document.write('Name: ID Value: ' + div.getAttribute('ID') + '<br>');
document.write('Name: DATA-TEST Value: ' + div.getAttribute('DATA-TEST') + '<br>');
document.write('Name: nonStandard Value: ' + div.getAttribute('nonStandard') + '<br>');
//create custom attribute
div.setAttribute('customTest', '567');
//retreive custom attribute
document.write('Name: customTest Value: ' + div.getAttribute('customTest') + '<br>');
<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
3. Properties on the DOM object, such as element.id
Many attributes can be accessed using convenient properties on the DOM object. Which properties exist on a given object depends on the object's DOM node type, regardless of which attributes are specified in the HTML. The available properties are defined somewhere in the prototype chain of DOM object in question. So, the specific properties that are defined will depend on the type of Element you are accessing.
For example, className and id are defined on Element and exist on all DOM nodes that are elements, but not text or comment nodes. value is more narrowly defined. It only available on HTMLInputElement and it's descendants.
Notice that JavaScript properties are case sensitive. Although most properties will use lowercase, some are camelCase. So always check the spec to be sure.
This "chart" captures a portion of the prototype chain for these DOM objects. It's not even close to complete, but it demonstrates the overall structure.
____________Node___________
| | |
Element Text Comment
| |
HTMLElement SVGElement
| |
HTMLInputElement HTMLSpanElement
Example Usage:
var div = document.getElementsByTagName('div')[0];
//get specific attributes
document.write('Name: class Value: ' + div.className + '<br>');
document.write('Name: id Value: ' + div.id + '<br>');
document.write('Name: ID Value: ' + div.ID + '<br>'); //undefined
document.write('Name: data-test Value: ' + div.dataset.test + '<br>'); //.dataset is a special case
document.write('Name: nonStandard Value: ' + div.nonStandard + '<br>'); //undefined
<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
Caveat: This is an explanation of how the HTML spec define attributes and how modern, evergreen browsers handle them. There certainly are old browsers (IE, Netscape, etc.) that didn't adhere to or even predated the spec. If you need to support old ancient (broken) browsers, you'll need more information than provided here.
You should always use the direct .attribute form (but see the quirksmode link below) if you want programmatic access in JavaScript. It should handle the different types of attributes (think "onload") correctly.
Use getAttribute/setAttribute when you wish to deal with the DOM as it is (e.g. literal text only). Different browsers confuse the two. See Quirks modes: attribute (in)compatibility.
One case I found where setAttribute is necessary is when changing ARIA attributes, since there are no corresponding properties. For example
x.setAttribute('aria-label', 'Test');
x.getAttribute('aria-label');
There's no x.arialabel or anything like that, so you have to use setAttribute.
Edit: x["aria-label"] does not work. You really do need setAttribute.
x.getAttribute('aria-label')
null
x["aria-label"] = "Test"
"Test"
x.getAttribute('aria-label')
null
x.setAttribute('aria-label', 'Test2')
undefined
x["aria-label"]
"Test"
x.getAttribute('aria-label')
"Test2"
These answers aren't really addressing the large confusion with between properties and attributes. Also, depending on the Javascript prototype, sometimes you can use a an element's property to access an attributes and sometimes you can't.
First, you have to remember that an HTMLElement is a Javascript object. Like all objects, they have properties. Sure, you can create a property called nearly anything you want inside HTMLElement, but it doesn't have to do anything with the DOM (what's on the page). The dot notation (.) is for properties. Now, there some special properties that are mapped to attributes, and at the time or writing there are only 4 that are guaranteed (more on that later).
All HTMLElements include a property called attributes. HTMLElement.attributes is a live NamedNodeMap Object that relates to the elements in the DOM. "Live" means that when the node changes in the DOM, they change on the JavaScript side, and vice versa. DOM attributes, in this case, are the nodes in question. A Node has a .nodeValue property that you can change. NamedNodeMap objects have a function called setNamedItem where you can change the entire node. You can also directly access the node by the key. For example, you can say .attributes["dir"] which is the same as .attributes.getNamedItem('dir'); (Side note, NamedNodeMap is case-insensitive, so you can also pass 'DIR');
There's a similar function directly in HTMLElement where you can just call setAttribute which will automatically create a node if it doesn't exist and set the nodeValue. There are also some attributes you can access directly as properties in HTMLElement via special properties, such as dir. Here's a rough mapping of what it looks like:
HTMLElement {
attributes: {
setNamedItem: function(attr, newAttr) {
this[attr] = newAttr;
},
getNamedItem: function(attr) {
return this[attr];
},
myAttribute1: {
nodeName: 'myAttribute1',
nodeValue: 'myNodeValue1'
},
myAttribute2: {
nodeName: 'myAttribute2',
nodeValue: 'myNodeValue2'
},
}
setAttribute: function(attr, value) {
let item = this.attributes.getNamedItem(attr);
if (!item) {
item = document.createAttribute(attr);
this.attributes.setNamedItem(attr, item);
}
item.nodeValue = value;
},
getAttribute: function(attr) {
return this.attributes[attr] && this.attributes[attr].nodeValue;
},
dir: // Special map to attributes.dir.nodeValue || ''
id: // Special map to attributes.id.nodeValue || ''
className: // Special map to attributes.class.nodeValue || ''
lang: // Special map to attributes.lang.nodeValue || ''
}
So you can change the dir attributes 6 ways:
// 1. Replace the node with setNamedItem
const newAttribute = document.createAttribute('dir');
newAttribute.nodeValue = 'rtl';
element.attributes.setNamedItem(newAttribute);
// 2. Replace the node by property name;
const newAttribute2 = document.createAttribute('dir');
newAttribute2.nodeValue = 'rtl';
element.attributes['dir'] = newAttribute2;
// OR
element.attributes.dir = newAttribute2;
// 3. Access node with getNamedItem and update nodeValue
// Attribute must already exist!!!
element.attributes.getNamedItem('dir').nodeValue = 'rtl';
// 4. Access node by property update nodeValue
// Attribute must already exist!!!
element.attributes['dir'].nodeValue = 'rtl';
// OR
element.attributes.dir.nodeValue = 'rtl';
// 5. use setAttribute()
element.setAttribute('dir', 'rtl');
// 6. use the UNIQUELY SPECIAL dir property
element["dir"] = 'rtl';
element.dir = 'rtl';
You can update all properties with methods #1-5, but only dir, id, lang, and className with method #6.
Extensions of HTMLElement
HTMLElement has those 4 special properties. Some elements are extended classes of HTMLElement have even more mapped properties. For example, HTMLAnchorElement has HTMLAnchorElement.href, HTMLAnchorElement.rel, and HTMLAnchorElement.target. But, beware, if you set those properties on elements that do not have those special properties (like on a HTMLTableElement) then the attributes aren't changed and they are just, normal custom properties. To better understand, here's an example of its inheritance:
HTMLAnchorElement extends HTMLElement {
// inherits all of HTMLElement
href: // Special map to attributes.href.nodeValue || ''
target: // Special map to attributes.target.nodeValue || ''
rel: // Special map to attributes.ref.nodeValue || ''
}
Custom Properties
Now the big warning: Like all Javascript objects, you can add custom properties. But, those won't change anything on the DOM. You can do:
const newElement = document.createElement('div');
// THIS WILL NOT CHANGE THE ATTRIBUTE
newElement.display = 'block';
But that's the same as
newElement.myCustomDisplayAttribute = 'block';
This means that adding a custom property will not be linked to .attributes[attr].nodeValue.
Performance
I've built a jsperf test case to show the difference: https://jsperf.com/set-attribute-comparison. Basically, In order:
Custom properties because they don't affect the DOM and are not attributes.
Special mappings provided by the browser (dir, id, className).
If attributes already exists, element.attributes.ATTRIBUTENAME.nodeValue =
setAttribute();
If attributes already exists, element.attributes.getNamedItem(ATTRIBUTENAME).nodeValue = newValue
element.attributes.ATTRIBUTENAME = newNode
element.attributes.setNamedItem(ATTRIBUTENAME) = newNode
Conclusion (TL;DR)
Use the special property mappings from HTMLElement: element.dir, element.id, element.className, or element.lang.
If you are 100% sure the element is an extended HTMLElement with a special property, use that special mapping. (You can check with if (element instanceof HTMLAnchorElement)).
If you are 100% sure the attribute already exists, use element.attributes.ATTRIBUTENAME.nodeValue = newValue.
If not, use setAttribute().
"When to use setAttribute vs .attribute= in JavaScript?"
A general rule is to use .attribute and check if it works on the browser.
..If it works on the browser, you're good to go.
..If it doesn't, use .setAttribute(attribute, value) instead of .attribute for that attribute.
Rinse-repeat for all attributes.
Well, if you're lazy you can simply use .setAttribute. That should work fine on most browsers. (Though browsers that support .attribute can optimize it better than .setAttribute(attribute, value).)
Interesting observation from Google API script regarding this:
They do it like this:
var scriptElement = document.createElement("script");
scriptElement = setAttribute("src", "https://some.com");
scriptElement = setAttribute("nonce", "https://some.com");
scriptElement.async = "true";
Notice, how they use setAttribute for "src" and "nonce", but then .async = ... for "async" attribute.
I'm not 100% sure, but probably that's because "async" is only supported on browsers that support direct .attr = assignment. So, there's no sense trying to setAttribute("async") because if browser doesn't understand .async=... - it will not understand "async" attribute.
Hopefully, that's a helpful insight from my ongoing "Un-minify GAPI" research project. Correct me if I'm wrong.
This looks like one case where it is better to use setAttribute:
Dev.Opera — Efficient JavaScript
var posElem = document.getElementById('animation');
var newStyle = 'background: ' + newBack + ';' +
'color: ' + newColor + ';' +
'border: ' + newBorder + ';';
if(typeof(posElem.style.cssText) != 'undefined') {
posElem.style.cssText = newStyle;
} else {
posElem.setAttribute('style', newStyle);
}
methods for setting attributes(for example class) on an element:
1. el.className = string
2. el.setAttribute('class',string)
3. el.attributes.setNamedItem(object)
4. el.setAttributeNode(node)
I have made a simple benchmark test (here)
and it seems that setAttributeNode is about 3 times faster then using setAttribute.
so if performance is an issue - use "setAttributeNode"
This is very good discussion. I had one of those moments when I wished or lets say hoped (successfully that I might add) to reinvent the wheel be it a square one.
Any ways above is good discussion, so any one coming here looking for what is the difference between Element property and attribute. here is my penny worth and I did have to find it out hard way. I would keep it simple so no extraordinary tech jargon.
suppose we have a variable calls 'A'. what we are used to is as following.
Below will throw an error because simply it put its is kind of object that can only have one property and that is singular left hand side = singular right hand side object. Every thing else is ignored and tossed out in bin.
let A = 'f';
A.b =2;
console.log(A.b);
who has decided that it has to be singular = singular. People who make JavaScript and html standards and thats how engines work.
Lets change the example.
let A = {};
A.b =2;
console.log(A.b);
This time it works ..... because we have explicitly told it so and who decided we can tell it in this case but not in previous case. Again people who make JavaScript and html standards.
I hope we are on this lets complicate it further
let A = {};
A.attribute ={};
A.attribute.b=5;
console.log(A.attribute.b); // will work
console.log(A.b); // will not work
What we have done is tree of sorts level 1 then sub levels of non-singular object. Unless you know what is where and and call it so it will work else no.
This is what goes on with HTMLDOM when its parsed and painted a DOm tree is created for each and every HTML ELEMENT. Each has level of properties per say. Some are predefined and some are not. This is where ID and VALUE bits come on.
Behind the scene they are mapped on 1:1 between level 1 property and sun level property aka attributes. Thus changing one changes the other. This is were object getter ans setter scheme of things plays role.
let A = {
attribute :{
id:'',
value:''
},
getAttributes: function (n) {
return this.attribute[n];
},
setAttributes: function (n,nn){
this.attribute[n] = nn;
if(this[n]) this[n] = nn;
},
id:'',
value:''
};
A.id = 5;
console.log(A.id);
console.log(A.getAttributes('id'));
A.setAttributes('id',7)
console.log(A.id);
console.log(A.getAttributes('id'));
A.setAttributes('ids',7)
console.log(A.ids);
console.log(A.getAttributes('ids'));
A.idsss=7;
console.log(A.idsss);
console.log(A.getAttributes('idsss'));
This is the point as shown above ELEMENTS has another set of so called property list attributes and it has its own main properties. there some predefined properties between the two and are mapped as 1:1 e.g. ID is common to every one but value is not nor is src. when the parser reaches that point it simply pulls up dictionary as to what to when such and such are present.
All elements have properties and attributes and some of the items between them are common. What is common in one is not common in another.
In old days of HTML3 and what not we worked with html first then on to JS. Now days its other way around and so has using inline onlclick become such an abomination. Things have moved forward in HTML5 where there are many property lists accessible as collection e.g. class, style. In old days color was a property now that is moved to css for handling is no longer valid attribute.
Element.attributes is sub property list with in Element property.
Unless you could change the getter and setter of Element property which is almost high unlikely as it would break hell on all functionality is usually not writable off the bat just because we defined something as A.item does not necessarily mean Js engine will also run another line of function to add it into Element.attributes.item.
I hope this gives some headway clarification as to what is what.
Just for the sake of this I tried Element.prototype.setAttribute with custom function it just broke loose whole thing all together, as it overrode native bunch of functions that set attribute function was playing behind the scene.
Adding 2 more points related to .textContent and .innerHTML
<div id="mydiv"></div>
var elem = document.getElementById("mydiv");
elem.textContent = "hello"; // OK - Content has been updated
elem.setAttribute("textContent", "hello"); // NOT OK - You are trying to set
// the attribute than it's content
elem.innerHTML = "world"; // OK - Content has been updated
elem.setAttribute("innerHTML", "world"); // NOT OK - You are trying to set
// the attribute than it's content
One difference between the two is that setAttribute, when used to set the value of an <input/> will make that the default value when you call .reset() on the form it's part of, but .value = will not do this.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
Note that if setAttribute() is called to set the value of a particular attribute, a subsequent call to reset() won’t reset the attribute to its default value, but instead will keep the attribute at whatever value the setAttribute() call set it to.
If the element you are referring to does not already include a Javascript object property for a given attribute (as others have described), then setting that property will not propagate the change back to the DOM, it just adds the named property to the Javascript object, and the DOM ignores it. For example, getting the element mySpan by id and then doing mySpan.class = 'warning' will do nothing, whether or not the span element in question already has a class attribute defined, because mySpan.class is not defined in the Javascript object for a span element. You have to use mySpan.setAttribute('class', 'warning').
However a second nuance is that setting the Javascript object's innerHTML property using mySpan.setAttribute("innerHTML", someHTML) does not update the content of the element. I don't know how Javascript even catches mySpan.innerHTML = something, and calls the HTML parser, but there's some magic going on under the hood.
I am having troubles with formatting basic javascript output. Right now it is outputting in the generic times font, and I would like to change that to something like calibri.
Example:
var x = document.getElementById("textbox1").value;
document.print("<p style='font-family:calibri'>x</p>");
I'm aware that this doesn't work because it's treating it as a string literal and just outputs an x in calibri font. So how can I get it to output the variable x and keep the font formatting?
Must stay in javascript and html, can use CSS but am not very familiar at all with it.
The reason it's being treated as a string literal is because it is one.
var x = document.getElementById("textbox1").value;
document.print("<p style='font-family:calibri'>x</p>");
If you want the #textbox's value to appear you'll need this:
var x = document.getElementById("textbox1").value;
document.print("<p style='font-family:calibri'>"+x+"</p>");
Basically, that ties the three strings together, as + is an operator that not only will calculate
alert(1 + 1)
Which would come out as the integer 2
But also
'Hi.'+" I'm Jeff."
Which would come out as the string "Hi. I'm Jeff."
You don't need to use String concatenation at all to achieve this as you want to set the text contents of an element to exactly the String you've obtained
In your StyleSheet (i.e. between <style> and </style>),
.some_awesome_description {
font-family: calibri;
}
The . before the token here specifies "look for this in the class attribute"
In your JavaScript,
// get your String
var x = document.getElementById("textbox1").value;
// create a new element
var my_awesome_element = document.createElement('span');
// set it's text as the String
my_awesome_element.textContent = x;
// set it's class to be matched by the CSS
my_awesome_element.setAttribute('class', 'some_awesome_description');
// append it to the DOM tree where you want it
document.body.appendChild(my_awesome_element);
Things we used
method document.createElement to create a new element
property node.textContent to set the text of an element
method element.setAttribute to create an attribute on an element
method node.appendChild to add an element to the DOM tree
document.body, the standard way to reference the <body> of a HTML #document
<span>, a generic inline container element
Separate the x from the strings with your <p> and concatenate (+):
var x = document.getElementById("textbox1").value;
document.write("<p style='font-family:calibri'>" + x + "</p>");
I'm trying to load several images by a drop action and than resizing them and adding them as a thumbnail. The resize part is very important because the images can be very large and I want to make the thumbnails small of size.
Here is my code:
loadingGif(drop);
for (var i=0;i<files.length;i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = function(e) {
var src = e.target.result;
var img = document.createElement('img');
img.src = src;
var scale = 100/img.height;
img.height = 100;
img.width = scale*img.width;
output.push('<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>');
if(output.length == files.length) {
drop.removeChild(drop.lastChild);
drop.innerHTML += output.join('');
output.length = 0;
}
}
reader.readAsDataURL(file);
}
As you can probably tell I insert a loading gif image in my dropzone until all files are loaded (output.length == files.length). When a file is loaded I add html to an array which I will print if the load is complete. The problem is I can't seem to add the img object (I need this object to resize the image) to the html string, which seems obvious as the img is an object... So my question to you guys is: how do I do this? :)
Generally speaking, it's bad habit to play with DOM elements as strings. You should instead use the native javascript (or the library/framework you are using) commands to create the elements and set their attributes.
For example if you have an element with id "image-container" which contains all your images, you may write.
var container = document.getElementById( 'image-container' );
var img = document.createElement( 'img' );
container.appendChild( img );
Instead of a large HTML string containing all your output, you can then have only a reference to an element containing all the other elements, and either appending it to the body as soon as all the elements have been loaded, or keeping it hidden and showing it when the loading is complete.
if (output.length == files.length) {
drop.removeChild(drop.lastChild);
drop.appendChild( container );
output.length = 0;
}
Remember IDs have to be unique. There cannot be more than one element with the same ID in the same document.
HTML is parsed into elements when inserted onto the page, but that doesn't mean the two formats 1 to 1 translatable.
You could use outerHTML to translate the <img> element to a HTML string. But this wont be efficient. You are translating an element to a string only to be parsed as an element again. Kinda sloppy.
"<div id='image'>"+ img.outerHTML +"</div>"
You could build the <img> tag as a string.
"<div id='image'><img src='"+ src +"'></div>"
But that starts to get hairy too. So lastly you could append the image element after you create the other html.
drop.innerHTML = "<div class='image'></div>"
document.querySelectorAll('.image:last-child')[0].appendChild(img);
However, food for thought: when you start having this much HTML in your JS, you may want to rethink your approach a bit. It's a hard to maintain and very human error prone pattern.
As others have said, there are reasons why one would avoid/choose to use strings to represent DOM elements. Also, it's a bit of a wtf moment reading code that attempts to mix both methods of representing html elements. that said, you can skip creating the image as an element in and of itself, instead inserting the appropriate string into your result(stack?).
This would have the desired scaling effect:
var src = e.target.result;
var imgStr = "<img src='" + src + "' height='" + 100 + "'/>";
ouput.push('<div id="imagecontainer"><div id="image">'+imgStr+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>');
You can create an object with arbitrary properties, in order to hold both the image and your HTML string:
var result = {
html: '<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>',
imgTag: img
}
output.push(result);
And then later on when you iterate through the results array, you can access these parts as result.html or result.imgTag (changing the first part to whatever variable you've assigned the object to).
It does mean that you'd need to change your current output.join('') to a loop that actually iterates through the values of output and concatenates their html properties instead. If you really wanted to avoid this, you could stick the images in a separate output-style array. But this isn't as clean, and runs the risk of the two array contents becoming out-of-sync. I'd stick to having two separate properties of the same object, as cleaner and better.
I am having trouble changing a variable on a page with lots of PHP and JavaScript.
This part is working fine for me:
<script language="javascript" type="text/javascript">
function changebg(my)
{
document.getElementById("imglayer").style.backgroundImage ='url('+ my.src +')';
document.getElementById("cropframe").style.backgroundImage ='url('+ my.src +')';
}
var test2 = new String("url('+ my.src +')");
</script>
<img src="../../uploads/595MCoDFyArFFe.jpg" width="50" height="50" onclick="changebg(this)" >
<img src="../../uploads/P6l6J8aqzli6gh.jpg" width="50" height="50" onclick="changebg(this)" >
<img src="../../uploads/stXWS8fL4L3nvs.jpg" width="50" height="50" onclick="changebg(this)" >
with the div IDs being called for later.
My issue is I have another variable that I need to change dynamically:
<script type="text/javascript">
var test1 = new String( "<?php $src_name = '" );
var test2 = new String( "956ENbXjzTlkBo.jpg" );
var test3 = new String( "'; // modify this, original file?>");" );
document.write( String( test1, test2, test3 );
</script>
I need var test2 to change with the other two which are being grabbed by the div ID.
How do I change that string value? Is this even possible?
Any help would be greatly appreciated!
First of all, this is not Java (and even in Java you do not really need it). You should not use new String(…); simply use string literals:
var test1 = "…";
etc.
Second, strings are immutable; you cannot change a string value/object; you can only create and assign a new string. However, you can also create a user-defined Object instance that has a method that returns a value according to other values (like variable values):
var test2 = {
toString: function () {
return "foo" + test1 + "bar";
}
};
The document.write() DOM method implicitly converts its argument to string, which is done by calling either the hull object's toString() or valueOf() method, whichever is available first (see the ECMAScript Language Specification, 5.1 Edition, section 9.8). So
document.write(test2);
is equivalent to
document.write(String(test2));
(section 15.5.1) or
document.write(test2.toString());
It will write the return value of the toString() method of the object referred to by the value of test2. (For dynamic change of the output, you need to use other DOM features, such as the standards-compliant textContent, nodeValue, or the proprietary innerHTML property.)
BTW, the String constructor only considers one argument (see above), so new String(x, y, z) is equivalent to new String(x). Perhaps you were looking for concatenation: new String(x + y + z). But if at least one operand is of type String, x + y + z suffices; if not, String(x) + y + z or "" + x + y + z works.
Just use the right quotes:
var test2 = new String("url(" + my.src + ")");
Or simply:
var test2 = "url(" + my.src + ")";
However, you can't change a php variable by writing php code from Javascript. When the Javascript runs, the php script has aready ended.
First off, you're going a very weird way about building a string. I assume the point of this is to, at the end of all of this, end up with a string that looks like this:
<?php $src_name = 'X'; // modify this, original file ?>
(This outputs PHP, which won't be interpreted by your web server, but I'll assume you know that and you're outputting it for other reasons.)
Where x is some piece of data that's available in some other DOM element (one of your img elements, perhaps, since the filenames are similar). If you then want to, after some future arbitrary event occurs, update this x value that has been printed to the page. You'll need to give yourself some tangible element to update - for example, a span element.
Try document.write()ing this:
document.write("<?php $src_name = '<span id=\"my-element\">X</span>'; // modify this, original file ?>");
Note I've changed your < and > to their encoded equivalents.
Then, you can update the contents of your span using JavaScript at a later date (see below). This isn't changing the variable you have declared, but rather it is changing the contents of the page. Since you are just printing your string at the end of it all (or, trying to, since String() won't concatenate the given strings like you seem to think it will), it seems to me like this is what you're trying to accomplish.
document.getElementById("my-element").innerText = "NEW VALUE";
Again, this is not updating the variable, per se, just updating the text that you are printing to the page. This seems to be your end goal anyhow, correct me if I'm wrong.
I have a server size image stream where you pass "fileid", width and height to and it streams an image to client. I'm using CKEditor, and would like to add jquery function that changes it's url when height or width changes in the textboxes.
As you see here on the pic its a specific format:
/Content/Image/{digit}/{width}/{height} rest is optional in string.
Lets say id's of them textboxes are "txtwidth" and "txtheight", how would you add jquery functionality to it that replaces width and height in url textbox, and only if it matches string starting with /Content/Image/{digit}/{width}/{height}?
Thanks in advance
/Lasse
You can do this easily by using regexp to match the string and to replace the corresponding parts. As you mentioned that you'd want to do this with jQuery I am assuming you have jQuery already on your site, but if you don't I wouldn't recommend adding it for this.
Instead of explaining further what to do, I've pasted the code below and commented each step, which should make it quite clear what's going on:
// bind onchange and keypress events to the width and height text boxes
$('#txtwidth, #txtheight').bind('change keypress', function(){
// define the regexp to which to test with, edit as needed
var re = /\/Content\/Image\/([0-9]+)\/[0-9]+\/[0-9]+\//,
// store url and its value to a variable so we won't have to retrieve it multiple times
url = $('#url'),
val = url.val();
// test if regexp matches the url
if (!re.test(val)) {
// doesn't match
return;
}
// we got this far, so it did match
// replace the variables in the regexo
val = val.replace(re, "/Content/Image/$1/" + $("#txtwidth").val() + "/" + $("#txtheight").val() + "/");
// put it back into the input field
url.val(val);
});
example: http://jsfiddle.net/niklasvh/wsAcq/
Let's say that the URL field has the HTML id "fileUrl". The regular expression equivalent to its value is:
/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/
Here is a quick proposal (not tested and not optimized at all):
$("#txtwidth").change(function()
{
var value=$("#fileUrl").val();
$("#fileUrl").val(value.replace(/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/, "/Content/Image/$1/"+$("#txtwidth").val()+"/$3"));
});
$("#txtheight").change(function()
{
var value=$("#fileUrl").val();
$("#fileUrl").val(value.replace(/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/, "/Content/Image/$1/$2/"+$("#txtheight").val()));
});
i was going to suggest /(\d+)/g
<div id="replace_this">/Content/Image/56/1024/768</div>
var newWidth = 2048;
var newHeight = 384;
var matches = $('#replace_this').html().match(/(\d+)/g);
newHTML = $('#replace_this').html().replace(matches[1], newWidth);
newHTML = newHTML.replace(matches[2], newHeight);
$('#replace_this').html(newHTML);
http://jsfiddle.net/qpmuT/
I was going to suggest a similar approach as Niklas' answer (before I was interrupted by something important, or possibly a squirrel). So go with that (and +1 from me).
A couple of points, though:
Validate the contents of the width and height fields. Or at least use parseInt. Otherwise, if the user enters a non-digit character, the regular expression will stop matching...
Match on [0-9]* instead of [0-9]+. The latter would break the regex if the user left a field empty. Of course, doing val = parseInt(...) || 0 would fix it as well.
In other words, I'd do something like this:
JSFiddle: http://jsfiddle.net/PPvG/j8dT9/
var re = /\/Content\/Image\/([0-9]*)\/[0-9]*\/[0-9]*\//,
url = $('#url'),
val = url.val(),
width = parseInt($("#txtwidth").val(), 10) || 0,
height = parseInt($("#txtheight").val(), 10) || 0;
if (re.test(val)) {
val = val.replace(re, "/Content/Image/$1/" + width + "/" + height + "/");
url.val(val);
}
Also, in case the path (/Content/Image/) might change in the future, you could use this more general regex: /^\/(.+)\/([0-9]*)\/[0-9]*\/[0-9]*\// and let the replacement string start with /$1/$2/. (See this JSFiddle.)
Finally, I wouldn't bind to keypress. Aside from possible side effects in some browsers (like the change event not being handled), there is a UX concern. Most users are used to input widgets handling their input on blur, because their native apps work that way. Besides, many users look at their keyboard when typing numbers (numpads are getting rare, these days).