Window onload function if else statements

Jessy642 0
Viewed 61

I would like to run different functions depending if a field is checked or not during page load.

So I use window.onload. The first if condition works great but I would like to add more if conditions as defined below. But it doesn't seem to be the proper way.

I thought I could work with if and if else. Does someone know how to make multiple if conditions work for window.onload function?

<script>
window.onload=function(){
if (document.getElementById("field1").checked) {
document.getElementById("field2").style.color = "red";
}
else if (document.getElementById("field3").checked) {
document.getElementById("field4").style.color = "red";
}
<script>

Added: I would like to add that all functions must be executed if all the if statements are fitting (so if else functions are maybe incorrect in this context). If only field1 is fitting the conditions, only the matching field2 should turn colour of text into red.

It’s not about the colour (that’s just an example for a JS function) - in real I want 3 things: enter value X, turn red and get disabled for future inputs (I already coded that - so not necessary).

UPDATE: Thanks to your comments. I used the code of Emiel Zuurbier: It's working for field 1 until 4 but not for field 10 until 14, did I wrote it wrong?

 <script>
 const fieldMap = [
 ['field1', 'field2', 'field3', 'field4'],
 ['field10', 'field11', 'field12', 'field14']
 ];

 window.onload = function() {
  for (const [fieldA, fieldB, fieldC, fieldD] of fieldMap) {
    if (document.getElementById(fieldA).checked) {
        document.getElementById(fieldB).value = "X";
        document.getElementById(fieldB).style.color = "red";
        document.getElementById(fieldB).disabled = true;
        document.getElementById(fieldC).value = "X";
        document.getElementById(fieldC).style.color = "red";
        document.getElementById(fieldC).disabled = true;
        document.getElementById(fieldD).value = "X";
        document.getElementById(fieldD).style.color = "red";
        document.getElementById(fieldD).disabled = true;
     }
   }
 }
 </script>
onload javascript html
2 Answers

You can eleminate repeating tasks by taking the dynamic parts of your code, in this case your ID selectors, and put them in an array (or object) which you can loop over.

const fieldMap = [
  ['field1', 'field2'],
  ['field3', 'field4']
];

window.onload = function() {
  for (const [fieldA, fieldB] of fieldMap) {
    if (document.getElementById(fieldA).checked) {
      document.getElementById(fieldB).style.color = 'red';
    }
  }
}

The principle of writing your code like this is called DRY (Don't Repeat Yourself)

Emiel Zuurbier0

winow.onload executes your function() when the page is fully loaded, but it happens just once. If the code you provided is correct then I think you might be missing } at the end. However, there's still one thing that bothers me. If you check if a specified checkbox is checked it checks the checked property only when the page is fully loaded, not when the user clicks on the #field checkbox. If you want the check whether the user checked the checkbox then you can use eventlistener 'check'.

Jakub Zieliński0
Related