Caps and Lowercase input that also generates in output

Question

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!

Answer 1

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.

Answer 2

You can use this regex replace to change a sentence to Proper Case:

const regex = /\b(\w)(\w*)/g;
const input = 'Fix this lower and UPPER to Proper'
let result = input.replace(regex, function(m, c1, c2) {
  return c1.toUpperCase() + c2.toLowerCase()
});
console.log('result: ', result);
// => 'Fix This Lower And Upper To Proper'

Explanation of regex:

• \b -- word boundary
• (\w) -- capture group 1: a singe word character
• (\w*) --capture group 2: zero to multiple word characters
• g -- flag for global, e.g. run pattern multiple times
• replace function: parameter c1 contains capture group 1, c2 contains capture group 2