How do I loop through the containers so that the window alerts don't pop-up if at least one input field is filled? Same with radios

Question

I managed to make an infinite loop through the containers which have different temperature elements, but I have a problem with the input fields as well as radio buttons.

What I want is that if one input field is filled, the window alerts don't pop up. Same with radios. It's obvious that the loop doesn't even go through all inputs, it just checks the first one, so the others still think all of them are empty.

I tried a lot of things, as well as the 'isBlank' code here, but none of them worked.

What am'I missing?

const unitInput = document.getElementsByName('unit-input');

const radioOne = document.getElementsByName('radio-1');
const radioTwo = document.getElementsByName('radio-2');
const radioThree = document.getElementsByName('radio-3');

const convertedTemp = document.getElementsByClassName('converted-temp');

const inputArray = Array.from(unitInput);

const radioOneArray = Array.from(radioOne);
const radioTwoArray = Array.from(radioTwo);
const radioThreeArray = Array.from(radioThree);

console.log(inputArray);

function convertTemp() {
  //let fahrenheit = Number(unitInput.value) * 1.8 + 32;
  //let kelvin = Number(unitInput.value) + 273.15;
  for (let i = 0; i < inputArray.length; i++) {

    let isBlank = inputArray[i].value == '';

    if (isBlank) {
      window.alert('Please enter a temperature.');

      break;

    } else if (!isBlank) {
      for (let j = 0; j < radioOneArray.length; j++) {

        let isChecked = radioOneArray[i].checked == false;

        if (isChecked) {
          window.alert('Please choose what unit of temperature to convert to.');

          break;

        } else if (!isChecked) {

          break;
        }
      }
      break;
    }
  }
}
let containerIndex = 1;

showContainer(containerIndex);

function changeContainer(n) {
  showContainer(containerIndex += n);
}

function showContainer(n) {
  const containers = document.getElementsByClassName('container');

  if (n > containers.length) {
    containerIndex = 1
  }
  for (let i = 0; i < containers.length; i++) {
    containers[i].style.display = 'none';
  }
  containers[containerIndex - 1].style.display = "flex";
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 100%;
}

input[type='number'] {
  margin-bottom: 5px;
}

.radio-container {
  height: fit-content;
  font-size: 1rem;
  padding-top: 3px;
}

input[type='radio'] {
  margin-left: 10%;
}

label[for='temp-radio'] {
  border: 0;
}

.container button {
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.converted-temp {
  text-align: center;
  padding-top: 3px;
}

.as-console-wrapper {
  left: auto!important;
  min-height: 100%;
  width: 50%;
}

<div class="container">
  <button class="convert-unit" onclick="changeContainer(1)">&#8644;</button>
  <label>Type in temperature in °C</label><br>
  <input type="number" name="unit-input">
  <div class="radio-container">
    <input type="radio" name="radio-1">
    <label>Select this to convert to Fahrenheit</label><br>
    <input type="radio" name="radio-1">
    <label>Select this to convert to Kelvin</label>
  </div>
  <button onclick="convertTemp()">Convert</button>
  <span class="converted-temp"></span>
</div>

<div class="container">
  <button onclick="changeContainer(1)">&#8644;</button>
  <label>Type in temperature in °F</label><br>
  <input type="number" name="unit-input">
  <div class="radio-container">
    <input type="radio" name="radio-2">
    <label>Select this to convert to Celsius</label><br>
    <input type="radio" name="radio-2">
    <label>Select this to convert to Kelvin</label>
  </div>
  <button onclick="convertTemp()">Convert</button>
  <span class="converted-temp"></span>
</div>

<div class="container">
  <button onclick="changeContainer(1)">&#8644;</button>
  <label>Type in temperature in K</label><br>
  <input type="number" name="unit-input">
  <div class="radio-container">
    <input type="radio" name="radio-3">
    <label>Select this to convert to Celsius</label><br>
    <input type="radio" name="radio-3">
    <label>Select this to convert to Fahrenheit</label>
  </div>
  <button onclick="convertTemp()">Convert</button>
  <span class="converted-temp"></span>
</div>

Answer 1

Currently, as you are checking just the first index, before making a descision you need to check all the radios or inputs first.

You can use some and every methods to check for all the input and radios before making a decision

  const isBlank = inputArray.every(input => input.value == '')
  
  if(isBlank) {
    window.alert('Please enter a temperature.');
    return;
  }
  
  const isChecked = [...radioOneArray, ...radioTwoArray, ...radioThreeArray].some(radio => radio.checked)
  
  if (!isChecked) {
    window.alert('Please choose what unit of temperature to convert to.');
    return;
  }