else/if statement only runs once

Solution 1:

First of all, your code can easily be reduced from:

  // Add color classes on match
  if (favColors[0] === inputValue) {
    bodyEl.classList.add('black');
  } else if (favColors[1] === inputValue) {
    bodyEl.classList.add('red');
  } else if (favColors[2] === inputValue) {
    bodyEl.classList.add('blue');
  } else if (favColors[3] === inputValue) {
    bodyEl.classList.add('green');
  } else if (favColors[4] === inputValue) {
    bodyEl.classList.add('yellow');
  } else if (favColors[5] === inputValue) {
    bodyEl.classList.add('pink');
  } else if (favColors[6] === inputValue) {
    bodyEl.classList.add('orange');
  } else if (favColors[7] === inputValue) {
    bodyEl.classList.add('brown');
  } else if (favColors[8] === inputValue) {
    bodyEl.classList.add('white');
  } else if (favColors[9] === inputValue) {
    bodyEl.classList.add('purple');
  }

To:

  if(favColors.includes(inputValue)) bodyEl.classList.add(inputValue);

Then the issue you're facing is that you are adding twice to the classList. To fix this, just remove all favourite colors before adding:

  if(favColors.includes(inputValue)) {
    bodyEl.classList.remove(...favColors);
    bodyEl.classList.add(inputValue);
  }

Edit:

If you really want to stack the classes on top of each other (which I don't think is your use case), then you can just do this:

  if(favColors.includes(inputValue)) {
    bodyEl.classList.remove(inputValue);
    bodyEl.classList.add(inputValue);
  }

Solution 2:

You need to remove the old color. You could use the array for checking as well.

'use strict';

let inputElement = document.getElementById('inpp');
const btn = document.getElementById('btn');
let outputValue = document.getElementById('output');
const bodyEl = document.getElementById('thisBody');
let lastColor;

btn.addEventListener('click', (e) => {
    // Prevent form from reloading page
    e.preventDefault();
  
  let inputValue = inputElement.value;
  
  let favColors = ['black', 'red', 'blue', 'green', 'yellow', 'pink', 'orange', 'brown', 'white', 'purple'];
  
  // If user input match
  if (favColors.includes(inputValue)) {
    outputValue.innerHTML = `Awesome, ${inputValue} is so neat!`;
  } else if (inputValue === '') {
    outputValue.innerHTML = `Please enter a color..`;
  } else {
    outputValue.innerHTML = `Interesting, ${inputValue} is new to me!`;
  }

  // Add color classes on match
  if (favColors.includes(inputValue)) {
      if (lastColor) bodyEl.classList.remove(lastColor);
      bodyEl.classList.add(inputValue);
      lastColor = inputValue;
  }
  
  // Clear input value
  inputElement.value = '';
});

.black { background-color: black !important; }
.red { background-color: red !important; }
.blue { background-color: blue !important; }
.green { background-color: green !important; }
.yellow { background-color: yellow !important; }
.pink { background-color: pink !important; }
.orange { background-color: orange !important; }
.brown { background-color: brown !important; }
.white { background-color: white !important; }
.purple { background-color: purple !important; }

<div id="thisBody">
  <div class="container">
    <div class="content">
      <div>
        <h1 id="output">What's your favorite color?</h1>
        <form id="formy">
          <input id="inpp" type="text" placeholder="What's your favorite color?">
          <button type="submit" id="btn">Submit</button>
        </form>
      </div>
    </div>
  </div>
 </div>

Solution 3:

Your ifs do execute multiple times. However you only add your new color classes. You never clear the old ones. To clear them, add this code before your ifs

bodyEl.className = "";

Demo:

'use strict';

let inputElement = document.getElementById('inpp');
const btn = document.getElementById('btn');
let outputValue = document.getElementById('output');
const bodyEl = document.getElementById('thisBody');

btn.addEventListener('click', (e) => {
    // Prevent form from reloading page
    e.preventDefault();
  
  let inputValue = inputElement.value;
  
  let favColors = [
    'black',
    'red',
    'blue',
    'green',
    'yellow',
    'pink',
    'orange',
    'brown',
    'white',
    'purple'
  ];
  
  // If user input match
  if (favColors.includes(inputValue)) {
    outputValue.innerHTML = `Awesome, ${inputValue} is so neat!`;
  } else if (inputValue === '') {
    outputValue.innerHTML = `Please enter a color..`;
  } else {
    outputValue.innerHTML = `Interesting, ${inputValue} is new to me!`;
  }
  
  // remove previous color
  bodyEl.className = "";

  // Add color classes on match
  if (favColors[0] === inputValue) {
    bodyEl.classList.add('black');
  } else if (favColors[1] === inputValue) {
    bodyEl.classList.add('red');
  } else if (favColors[2] === inputValue) {
    bodyEl.classList.add('blue');
  } else if (favColors[3] === inputValue) {
    bodyEl.classList.add('green');
  } else if (favColors[4] === inputValue) {
    bodyEl.classList.add('yellow');
  } else if (favColors[5] === inputValue) {
    bodyEl.classList.add('pink');
  } else if (favColors[6] === inputValue) {
    bodyEl.classList.add('orange');
  } else if (favColors[7] === inputValue) {
    bodyEl.classList.add('brown');
  } else if (favColors[8] === inputValue) {
    bodyEl.classList.add('white');
  } else if (favColors[9] === inputValue) {
    bodyEl.classList.add('purple');
  } 
  
  // Clear input value
  inputElement.value = '';
});

/* Color classes */
.black {
  background-color: black !important;
}

.red {
  background-color: red !important;
}

.blue {
  background-color: blue !important;
}

.green {
  background-color: green !important;
}

.yellow {
  background-color: yellow !important;
}

.pink {
  background-color: pink !important;
}

.orange {
  background-color: orange !important;
}

.brown {
  background-color: brown !important;
}

.white {
  background-color: white !important;
}

.purple {
  background-color: purple !important;
}

<div id="thisBody">
  <div class="container">
    <div class="content">
      <div>
        <h1 id="output">What's your favorite color?</h1>
        <form id="formy">
          <input id="inpp" type="text" placeholder="What's your favorite color?">
          <button type="submit" id="btn">Submit</button>
        </form>
      </div>
    </div>
  </div>
 </div>

For a more efficient approach however, see @mplungjan's Answer

Solution 4:

Just set the color when found

You can save old color and remove it before setting

I also suggest you change the color to white if the bgcolor is black

let saveColor = "";
 ...


if (favColors.includes(inputValue)) {
  outputValue.innerHTML = `Awesome, ${inputValue} is so neat!`;
  if (saveColor) bodyEl.classList.remove(saveColor);
  bodyEl.classList.add(inputValue);
  saveColor = inputValue;
  bodyEl.style.color = inputValue === "black" ? "white" : "black"
}

'use strict';

const favColors = ['black', 'red', 'blue', 'green', 'yellow', 'pink', 'orange', 'brown', 'white', 'purple'];

let saveColor = "";
let inputElement = document.getElementById('inpp');
const btn = document.getElementById('btn');
let outputValue = document.getElementById('output');
const bodyEl = document.getElementById('thisBody');

btn.addEventListener('click', (e) => {
  // Prevent form from reloading page
  e.preventDefault();

  let inputValue = inputElement.value;

  // If user input match
  if (favColors.includes(inputValue)) {
    outputValue.innerHTML = `Awesome, ${inputValue} is so neat!`;
    if (saveColor) bodyEl.classList.remove(saveColor);
    bodyEl.classList.add(inputValue);
    saveColor = inputValue;
    bodyEl.style.color = inputValue === "black" ? "white" : "black"
  } else if (inputValue === '') {
    outputValue.innerHTML = `Please enter a color..`;
  } else {
    outputValue.innerHTML = `Interesting, ${inputValue} is new to me!`;
  }

  // Clear input value
  inputElement.value = '';
});

/* Color classes */

.black {
  background-color: black !important;
}

.red {
  background-color: red !important;
}

.blue {
  background-color: blue !important;
}

.green {
  background-color: green !important;
}

.yellow {
  background-color: yellow !important;
}

.pink {
  background-color: pink !important;
}

.orange {
  background-color: orange !important;
}

.brown {
  background-color: brown !important;
}

.white {
  background-color: white !important;
}

.purple {
  background-color: purple !important;
}

<div id="thisBody">
  <div class="container">
    <div class="content">
      <div>
        <h1 id="output">What's your favorite color?</h1>
        <form id="formy">
          <input id="inpp" type="text" placeholder="What's your favorite color?">
          <button type="submit" id="btn">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

Solution 5:

You add the classes relative to the color but you never remove them and, as you add classes on top of each other, only the last on will be considered (e.g. class="pink purple" will ignore "pink").

'use strict';

let inputElement = document.getElementById('inpp');
const btn = document.getElementById('btn');
let outputValue = document.getElementById('output');
const bodyEl = document.getElementById('thisBody');

btn.addEventListener('click', (e) => {
  // Prevent form from reloading page
  e.preventDefault();

  let inputValue = inputElement.value.toLowerCase(); // so "Black", "black" and "BLACK" will all work

  let favColors = [
    'black',
    'red',
    'blue',
    'green',
    'yellow',
    'pink',
    'orange',
    'brown',
    'white',
    'purple'
  ];

  // If user input match
  if (favColors.includes(inputValue)) {
    outputValue.innerHTML = `Awesome, ${inputValue} is so neat!`;

    // Add color classes on match (no need to have a separate `if`)
    // remove any previously set color: the reason for looping through `favColors`
    // is to preserve any class not related to color that you might have on the element
    favColors.forEach(color => bodyEl.classList.remove(color));
    // add the new color
    bodyEl.classList.add(inputValue);
  } else if (inputValue === '') {
    outputValue.innerHTML = `Please enter a color..`;
  } else {
    outputValue.innerHTML = `Interesting, ${inputValue} is new to me!`;
  }

  // Clear input value
  inputElement.value = '';
});

/* Color classes */

.black {
  background-color: black !important;
  color: white;
}

.red {
  background-color: red !important;
}

.blue {
  background-color: blue !important;
}

.green {
  background-color: green !important;
}

.yellow {
  background-color: yellow !important;
}

.pink {
  background-color: pink !important;
}

.orange {
  background-color: orange !important;
}

.brown {
  background-color: brown !important;
}

.white {
  background-color: white !important;
}

.purple {
  background-color: purple !important;
}

<div id="thisBody">
  <div class="container">
    <div class="content">
      <div>
        <h1 id="output">What's your favorite color?</h1>
        <form id="formy">
          <input id="inpp" type="text" placeholder="What's your favorite color?">
          <button type="submit" id="btn">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

P.S. I also optimized a bit your code and inserted comments for further explanation