Caps and Lowercase input that also generates in output

I've been trying to put together an input where the text automatically capitalizes the first letter of each word and makes all other letters lowercase for that word. I had some success using that for just making everything lower case after the first letter for the input with this:

 <input type = "text" size="8" name="textfield1" id="textfield1" />

with the javascript being

        document.getElementById('textfield1').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('textfield1')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1).toLowerCase();
    }
    
document.getElementById('textfield1')['value'] = inputValue;
});

I tried adding map(), split(), and join() in various ways based off of lessons I've found (I'm learning on my own, no formal training since high school) for use in a string with the console.log methods but I'm confused on how I can apply this to an input. It would take too long to note everything I've tried but one thing I did was this:

        document.getElementById('textfield1').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('textfield1')['value']; 
if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
  input.content = input.content.split(' ').map(function(inputValue) {
      return inputValue[0].toUpperCase() + inputValue.slice(1).toLowerCase();
}).join(' ');
    }
    
document.getElementById('textfield1')['value'] = inputValue;
});

I'm not sure what I'm missing here. I'm sure there's something that I'm not seeing or understanding. I also tried looking to see if there was something similar listed on here or elsewhere in relation to this and inputs but I didn't see anything specific to what I was looking for.

I want the input to remain the same for what comes up with the output into another box when it gets copied over.

Example of what I'm trying to do is:

input of textfield: heLlo OuT thERe!

output to another textarea with the click of a button: Hello Out There!

Your second version would be correct. However in this code:

else if (inputValue) {
  input.content = input.content.split(' ').map(function(inputValue) {
      return inputValue[0].toUpperCase() + inputValue.slice(1).toLowerCase();
}).join(' ');
    }

You started to use some input.content instead of the inputValue variable. Most probably yout mistake lies there.