Develop Reference

Add non-standard attribute to a select tag with Javascript

I want to create a select element through JavaScript and I want to set an attribute to it called data-placeholder.
How can we assign non-standard attributes with JavaScript without the browser complaining with:
Uncaught referenceError: Invalid left-hand side in assignment
Code that cause the error:
select1.data-placeholder="Choose ...";

Since it says with javascript not jquery...
yourElement.setAttribute('data-placeholder','value');

Here's a pretty simple non-jQuery way to achieve this;
var el = document.createElement('select');
el.setAttribute('data-placeholder', 'placeholder value');
document.body.appendChild(el);​
I've created a very simple JSFiddle to demonstrate it.
Hope that helps!

JQuery makes this easy:
$("<select></select>").attr("data-placeholder", "value").appendTo($element);

javascript if condition not executing all commands

I'm having one little iritating problem. I have simple if condition in javascript code.
It goes something like this:
if (istinito)
{
alert ('123');
document.getElementById('obavestavanje').value="Pobedi "+ime_igraca+"!!!";
kraj=true;
}
Alert apears when istinito=true, but element with id="obavestenje" never get its value, and variable kraj never is set to true. Variable kraj is global variable, and there are no conflicts with other parts of the JS code.
Any ideas why code stops after alert?

Looks like document.getElementById('obavestavanje') is returning null. You are trying to de-reference the null reference by using document.getElementById('obavestavanje').value which results in null pointer exception. If you look into the console, you should see some exception being raised. It is always a good idea to check if the document.getElementById() is returning a valid object before trying to dereference it.
e.g.
if (istinito)
{
alert ('123');
element = document.getElementById('obavestavanje')
if(element){
element.value="Pobedi "+ime_igraca+"!!!";
}
kraj=true;
}

First advice i could give you:
Use more console logging for debugging. Almost any modern browser got a console to debug and other things.
if (istinito) {
console.log("i am here");
}
from that same console you can also execute commands. Those dom manipulations are easily done from the console. just run them and see if it works.
the code:
document.getElementById('obavestavanje').value = "some value"
looks ok. nothing wrong with it. i guess you don't have an element with id "obavestavanje" ?

Looks like your code is okay. And you are sure you have an element by id 'obavestavanje'. Could you please tell what element is it? Is it a button, textbox or someting like that?
Also the String in the "Pobedi "+ime_igraca+"!!!" , what is 'ime_igraca'? Is it a variable and if it is have you defined this variable somewhere?
Or did you mean to give the value "Pobedi ime_igraca !!!" ??
Thanks
Ranis MK

Javascript height returning "getElementById('div') is null?

k this is probably something very easy but for some reason i am getting an error when trying to use javascript to change style.height.
My javascript looks like this:
document.getElementById('div').style.height=100px;
I have also tried
document.getElementById('div').style.height='100px';
document.getElementById('div').style.height='100';
document.getElementById('div').style.height=100;
and get the same error every time.
The error i am getting is:
document.getElementById('div') is null
I get this error in my firebug console. Thanks.

You probably don't have an element with id="div".
Or you're running your code before the body exists.

this have to work fine :
document.getElementById('div').style.height='100px';
please check your html code, and try in the console :
document.getElementById('div').style.height;
and see what returns after and before
(maybe its working and you cant see it, you can check it adding an background-color)

direct access to Textbox returns undefined values

I have a weird problem. In my js file, if I access a textbox directly like txtbox1.value it returns undefined, while if I get it with document.getElementById('txtbox1').value it gives me the value. I am not sure why this is happening. Can you suggest me some thing, where should I look?
Is this something related to IE 8?

When you use txtbox1, you are accessing a (probably) global variable of that name, which does not necessarily have anything to do with the HTML element with id txtbox1.
When you use document.getElementById('txtbox1'), you are specifically looking up the HTML element with id txtbox1.

I think you should add id = 'txtbox1' in your textbox tag

simple javascript question

document.getElementById("myFrame").setAttribute("src") = "http://www.yahoo.com/";
myFrame is an iframe element... when entering this into the chrome developer console, it gives me the error "Invalid left-hand side in assignment" I am trying to update the iframe. Is there a method I am forgetting?

setAttribute takes two arguments:
document.getElementById("myFrame").setAttribute("src", "http://www.yahoo.com/");
You are trying to set the DOM object to the string "http://www.yahoo.com/" ... which is invalid.

You don't really need setAttribute when setting the src property:
document.getElementById('myFrame').src = 'http://www.yahoo.com/';

You can't assign an function call to something, try this instead:
document.getElementById("myFrame").setAttribute("src", http://www.yahoo.com/");

Here, I fixed it
document.getElementById("myFrame").setAttribute("src", "http://www.yahoo.com/");

Try this...
document.getElementById("myFrame").setAttribute("src","http://www.yahoo.com/");