The initial code snippet is not functioning correctly
DN.onkeyup = DN.onkeypress = function(){
var div = document.getElementById("DN").value
document.document.getElementsByClassName("options-parameters-input").style.fontSize = div;
}#one{
height:100px;
width:100px;
background-color:#CCCCCC;
border:none;
margin:10px;
float:left;
}<div id="one">
<div class="options-parameters-input">
gfdgd
</div>
</div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
<tr>
<td>Test</td>
<td><textarea id="DN"></textarea></td>
</tr>
</table>On the other hand, this piece of code is operational
DN.onkeyup = DN.onkeypress = function(){
var div = document.getElementById("DN").value
document.getElementById("one").style.fontSize = div;
}#one{
height:100px;
width:100px;
background-color:#CCCCCC;
border:none;
margin:10px;
float:left;
}<div id="one">gfdgd</div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
<tr>
<td>Test</td>
<td><textarea id="DN"></textarea></td>
</tr>
</table>In the first code block, an attempt was made to use getElementsByClassName, but it resulted in an error...
Error: Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined(…)
Hence, the question arises on how to successfully target elements by their class names?
The objective is to enable administrators to modify or introduce new CSS rules for specific HTML elements via textarea or input fields, such as
.Is this approach deemed effective for injecting new CSS rules?
Thank you