Changing "float" onclick?

JavaScript
1

I’m trying to make a script which in realtime changes a DIV to float either left or right but somehow I’m doing something wrong?

Here is what I got…

function logoplace(that){
	document.getElementById('logoholder').style.float=that
}


<style type="text/css">
div#logoholder {
	float:left;
	border:1px solid #666666;
}
</style>

<input type="radio" name="logoplacement" value="left" onclick="logoplace(this)" />
Left
<input type="radio" name="logoplacement" value="right" onclick="logoplace(this)" />
Right
<br><br>
<div id="logoholder">This is a test</div>

Any ideas? Thanks in advance :wink:

2

document.getElementById(‘logoholder’).style.float=that.value

3

I feel that it’s redundant referencing the this object when you can easily just as well use a ternary operator to check the current float value.

function logoplace() {
    var ele = document.getElementById('logoholder');
    ele.style.float = (ele.style.float === 'left' ? 'right' : 'left');
}
4

Make sure the element you are floating is smaller than the available width-
and ‘float’ cannot be a property identifier in javascript (style.float)- use styleFloat and cssFloat,
or set the css string ‘float:left’ or ‘float:right’.

<!doctype html>
<head>
<title>refloat</title>
<style>
#logoholder{
	float: left;
	width:45%;
	border: 1px solid #666666;
}
</style>
<script>
function logoplace(e){
	e= e || window.event;
	var which= e.target || e.srcElement;
	if(which && which.value){
		document.getElementById('logoholder').style.cssText= 'float:'+which.value;
	}
}
window.onload= function(){
	document.getElementById('choosefloat').onclick= logoplace;
}
</script>
</head>
<body>
<fieldset id="choosefloat">
<legend>Float the test div</legend>
<label><input type= "radio" name= "logoplacement" value= "left" checked>Left</label>
<label><input type= "radio" name= "logoplacement" value= "right" >Right</label>
</fieldset>
<div id= "logoholder"> This is a test</div>
</body>
</html>