Currently, I am engrossed in a small project.
Here's the gist: I aim to read text field values and assign them to corresponding CSS rules.
For example,
document.getElementById("BD").value;
The value being read should be assigned to border-radius.
.style.border-radius:<VALUE>px;
But how do I establish that connection?
If I have three divs with individual names, how can I ensure they only apply to the selected div?
EDIT: Complete HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Opdracht 1</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script language="javascript">
function BorderDikte(){
document.getElementById("BD").value;
document.getElementById("BS").value;
document.getElementById("BK").value;
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
<tr>
<td width="318">Border dikte (thin, medium, thick)</td>
<td width="419"><textarea id="BD"></textarea></td>
</tr>
<tr>
<td>Border soort (dashed, dotted, solid or double)</td>
<td><textarea id="BS"></textarea></td>
</tr>
<tr>
<td>Border kleur (bijvoorbeeld #000 of #FFF</td>
<td><textarea id="BK"></textarea></td>
</tr>
<tr>
<td>Welke Div? ( 1, 2 of 3)</td>
<td><textarea id="DN"></textarea></td>
</tr>
<tr>
<td align="center"></td>
<td> <button>Go</button></td>
</tr>
<tr>
<td align="center"></td>
<td> <button>Reset</button></td>
</tr>
<tr>
<td align="center"></td>
<td> <button>Onzichtbaar</button></td>
</tr>
</table>
</body>
</html>
EDIT 2:
I need to rephrase my explanation...
For instance
[] [] []
Border = thick
Border color = #0F0
Border style = Solid
Which div = 2
Press go
The values are now being read and processed into my CSS so that only the second div (div 2) is updated.
[] **[]** []
^
Red and solid
Border = [textfield empty]
Border color = [textfield empty]
Border style = [textfield empty]
Which div? = [textfield empty]