Currently trying to make a bunch of dropdowns change an attribute on a web page. I have had full functionality but if I want to add more I need to put it all in a for loop.
document.getElementById("p").style.borderStyle = value;
This one line is the one I believe needs to be looked at but I've only been doing this for a couple days so I could be wrong.
Is there a way to do this along these lines or am I completely off base?
<!DOCTYPE hmtl>
<html>
<head>
</head>
<body>
<p id="p">This is a paragraph</p>
<select id="borderStyle" onchange="Refresh();">
<option value="default" disbled="true" selected="true">--Choose A Border--</option>
<option value="dashed">dashed</option>
<option value="dotted">dotted</option>
<option value="solid">solid</option>
</select><br><br>
</body>
<script>
function Refresh() {
const dropdowns = ["borderStyle"]
for (let i = 0; i < dropdowns.length; i++) {
var a = document.getElementById(dropdowns[i]);
var value = a.value;
document.getElementById("p").style.borderStyle = value;
console.log(value);
}
}
</script>
</html>
I tried replacing the "borderStyle" in the referenced line with "dropdowns[i]" and that gave me this error when trying to change the style.
Uncaught TypeError: Cannot set properties of undefined (setting '0')
I've also looked through all the similar questions out there and i may just be missing soemthing but they dont s to be applying to me directly enough, so if someone could help it would be appreciated.
