如何比较数组并找出字母是否在数组中的相同索引处，以及它是否在数组中，即使它不在相同的索引处？

Question

嗨，我正在写一个javascript猜字游戏，在页面开始时随机生成一个单词，然后用户尝试猜测单词，如果用户正确猜测整个单词，单词将变成绿色并推送到页面。我已经完成了这一部分。现在，如果用户猜测与随机单词不匹配，我尝试比较这两个单词，如果用户猜测中的任何字母与随机单词字母匹配，并且两个字母都在相同的索引中，则使用猜测中的字母变为黄色，然后推送到屏幕上。但是如果字母在错误的索引中，但仍然存在于其他单词中，我希望该字母是蓝色的，我尝试将它们转换为数组并进行比较，但我找不到这样做的逻辑。

​

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* const wordDirectory = ["ABOUT", "ABOVE", "ACTOR", "ACUTE", "ADEPT", "ADMIT", "ADOPT", "ADORE", "ADULT", "AFTER", "AGILE", "AGREE", "AISLE", "ALBUM", "ALERT", "ALIEN", "ALIKE", "ALIVE", "ALLOW", "ALONG", "ALOUD", "ALTER", "AMBER", "AMEND", "AMPLE", "AMPLY", "AMUSE", "ANGEL", "ANGLE", "ANKLE", "APPLE", "APPLY", "APRON", "ARROW", "ASSET", "AVERT", "AVOID", "BACON", "BAKER", "BASIC", "BASIL", "BASIN", "BATHE", "BEACH", "BEARD", "BEAST", "BEATS", "BEGIN", "BEGUN", "BEING", "BELOW", "BIRCH", "BIRTH", "BLACK", "BLANK", "BLINK", "BLOWN", "BLUSH", "BOARD", "BOAST", "BONUS", "BOOST", "BOUND", "BOWEL", "BRAID", "BRAIN", "BRAKE", "BRAND", "BRAVE", "BREAD", "BREAK", "BRIDE", "BRIEF", "BRING", "BRISK", "BROKE", "BROOM", "BROWN", "BULKY", "BUNCH", "BUYER", "CABIN", "CABLE", "CAMEL", "CANDY", "CATER", "CHAIN", "CHAIR", "CHALK", "CHARM", "CHART", "CHASM", "CHEAP", "CHIEF", "CHINA", "CHIPS", "CHOKE", "CHOPS", "CIGAR", "CLAIM", "CLAMP", "CLASP", "CLASS", "CLEAN", "CLEAR", "CLIMB", "CLOAK", "CLONE", "CLOSE", "CLOTH", "CLOUD", "CLOVE", "CLOWN", "COAST", "CORAL", "COUNT", "CRAFT", "CRANE", "CRANK", "CRAWL", "CRISP", "CROSS", "CROWD", "CROWN", "CRUSH", "CRUST", "CURVE", "DAILY", "DAIRY", "DANCE", "DATUM", "DECAY", "DECOR", "DELAY", "DEVIL", "DIARY", "DINER", "DIRTY", "DISCO", "DIVER", "DOUBT", "DOUGH", "DRAFT", "DRAIN", "DRAWN", "DREAM", "DRESS", "DRINK", "DRIVE", "EARLY", "EARTH", "EIGHT", "ELBOW", "EMAIL", "EMPTY", "ENJOY", "EQUAL", "EQUIP", "ETHIC", "EXACT", "EXIST", "EXTRA", "FACET", "FAIRY", "FAITH", "FALSE", "FANCY", "FAULT", "FAVOR", "FEAST", "FETCH", "FIBER", "FIELD", "FINAL", "FIRST", "FLAIR", "FLAKE", "FLASK", "FLICK", "FLOAT", "FLOCK", "FLOWN", "FLUSH", "FLUTE", "FOCAL", "FOCUS", "FORCE", "FORUM", "FOUND", "FRAME", "FRANK", "FRAUD", "FRESH", "FRONT", "FROST", "FROZE", "FRUIT", "FUNGI", "FUNNY", "GHOST", "GIVEN", "GLASS", "GLAZE", "GLOBE", "GLORY", "GLOVE", "GRACE", "GRADE", "GRAIN", "GRAND", "GRAPE", "GRAPH", "GRASP", "GRASS", "GRAVY", "GREAT", "GREET", "GRILL", "GROUP", "GROWN", "GUARD", "GUESS", "GUEST", "GUIDE", "HABIT", "HAIRY", "HAPPY", "HARDY", "HASTE", "HAUNT", "HEART", "HEAVY", "HEFTY", "HONEY", "HORSE", "HOTEL", "HOUSE", "HUMAN", "HUMID", "HUMOR", "HUSKY", "IDEAL", "IMAGE", "IMPLY", "INCUR", "INDEX", "INFER", "INFRA", "INLET", "INNER", "INPUT", "INSET", "IVORY", "JEANS", "JOINT", "JUICE", "LABOR", "LADEN", "LAPSE", "LARGE", "LATEX", "LAUGH", "LAYER", "LEAFY", "LEANS", "LEARN", "LEMON", "LIGHT", "LINER", "LIVER", "LIVES", "LODGE", "LOFTY", "LOGIC", "LOVER", "LOWER", "LUCID", "LUCKY", "LUNCH", "LYMPH", "MACRO", "MAGIC", "MAIZE", "MAJOR", "MAKER", "MANGO", "MAPLE", "MARCH", "MATCH", "MEDAL", "MEDIA", "MERCY", "MERIT", "METAL", "MICRO", "MIDST", "MIGHT", "MINOR", "MINUS", "MIXER", "MODEL", "MOIST", "MONEY", "MONTH", "MORAL", "MOUNT", "MOUSE", "MOUTH", "MOVER", "MOVIE", "MULTI", "MUSIC", "NAIVE", "NEWLY", "NEXUS", "NICHE", "NIGHT", "NINJA", "NOBLE", "NODAL", "NOISE", "NOISY", "NORTH", "NOTCH", "NOTED", "NOVEL", "NURSE", "OCEAN", "OFTEN", "OLIVE", "ONSET", "OPERA", "OPTIC", "ORBIT", "ORGAN", "OTHER", "OUGHT", "OUNCE", "OUTER", "OVERT", "OWING", "OWNED", "OWNER", "OXIDE", "PACED", "PAINT", "PANIC", "PANTS", "PARTY", "PASTE", "PATCH", "PATIO", "PAUSE", "PAVED", "PAYER", "PEACH", "PEARL", "PEDAL", "PHASE", "PHONE", "PIANO", "PILOT", "PINCH", "PIVOT", "PIZZA", "PLACE", "PLAIN", "PLANE", "PLANK", "PLANT", "PLATE", "PLEAD", "PLUCK", "POINT", "POKER", "POLAR", "PORCH", "POUCH", "POUND", "POWER", "PRESS", "PRICE", "PRIDE", "PRIME", "PRINT", "PRIZE", "PRONE", "PROUD", "PROVE", "PUNCH", "PUPPY", "PURGE", "PURSE", "QUAIL", "QUEEN", "QUERY", "QUEST", "QUICK", "QUIET", "QUILT", "QUITE", "QUOTA", "QUOTE", "RADIO", "RAINY", "RAISE", "RANCH", "RANGE", "RAPID", "RATIO", "REACH", "REACT", "READY", "REALM", "REGAL", "REIGN", "RELAX", "RELAY", "RELIC", "REMIT", "REPAY", "REPLY", "RESIN", "RIDGE", "RIGHT", "RINSE", "RISKY", "RIVAL", "ROAST", "ROCKY", "ROMAN", "ROUGH", "ROUND", "ROYAL", "RUSTY", "SADLY", "SAINT", "SALON", "SALTY", "SANDY", "SATIN", "SAUCE", "SCALE", "SCARE", "SCARF", "SCARY", "SCENT", "SCORE", "SCOUT", "SCREW", "SERUM", "SETUP", "SHADE", "SHADY", "SHAKE", "SHAKY", "SHAME", "SHAPE", "SHARE", "SHARK", "SHARP", "SHAVE", "SHEAR", "SHELF", "SHELL", "SHIFT", "SHINE", "SHIRT", "SHOCK", "SHORE", "SHORT", "SHOUT", "SHOVE", "SHOWN", "SHRUB", "SHRUG", "SIGHT", "SIGMA", "SILKY", "SINCE", "SIXTY", "SKATE", "SKILL", "SKIRT", "SLACK", "SLATE", "SLEEP", "SLEPT", "SLICE", "SLICK", "SLIDE", "SLING", "SLUMP", "SMALL", "SMART", "SMILE", "SMOKE", "SMOKY", "SNACK", "SNAIL", "SNAKE", "SNEAK", "SOBER", "SOLAR", "SOLVE", "SOUND", "SOUTH", "SPACE", "SPADE", "SPARE", "SPARK", "SPEAK", "SPEAR", "SPELL", "SPICE", "SPICY", "SPIKE", "SPILL", "SPINE", "SPLIT", "SPOIL", "SPOKE", "SPORT", "SPRAY", "SQUAD", "SQUAT", "SQUID", "STACK", "STAFF", "STAGE", "STAIN", "STAIR", "STAKE", "STALE", "STAMP", "STAND", "STARE", "STEAD", "STEAK", "STEAL", "STEAM", "STEEL", "STERN", "STICK", "STILL", "STING", "STOCK", "STONE", "STORE", "STORM", "STORY", "STOVE", "STRAP", "STRAW", "STRAY", "STUCK", "STUDY", "STUFF", "STUMP", "STYLE", "SUGAR", "SUITE", "SUNNY", "SUPER", "SWAMP", "SWEAT", "SWEPT", "SWIFT", "SWINE", "SWING", "SWIRL", "SYRUP", "TABLE", "TAKEN", "TEACH", "TEMPO", "THANK", "THEIR", "THICK", "THING", "THINK", "THIRD", "THORN", "THOSE", "THREE", "THROW", "THUMB", "THYME", "TIDAL", "TIGER", "TIMER", "TODAY", "TOKEN", "TONIC", "TOUCH", "TOUGH", "TOWEL", "TOWER", "TOXIC", "TOXIN", "TRACE", "TRACK", "TRADE", "TRAIL", "TRAIN", "TRASH", "TREAD", "TREND", "TRIAD", "TRIAL", "TRIBE", "TRICK", "TWICE", "TWINS", "ULCER", "ULTRA", "UNCLE", "UNDER", "UNIFY", "UNITE", "UNITY", "UPSET", "URBAN", "USAGE", "VAGUE", "VALID", "VALUE", "VIDEO", "VIRAL", "VITAL", "VOCAL", "VODKA", "VOICE", "VOWEL", "WAFER", "WAGED", "WAGER", "WAGON", "WAIST", "WAIVE", "WASTE", "WATCH", "WATER", "WEARY", "WEIGH", "WEIRD", "WHALE", "WHARF", "WHEAT", "WHILE", "WHITE", "WHOLE", "WHOSE", "WIDEN", "WIDTH", "WINDY", "WOMAN", "WOMEN", "WORLD", "WORSE", "WORST", "WORTH", "WOULD", "WOUND", "WOVEN", "WRECK", "WRITE", "WRONG", "YEAST", "YIELD", "YOUNG", "YOUTH"];
*/



// generate random word for user and robot to guess

const randomWord = function(array) {
  return array[Math.floor(Math.random() * array.length)];
}

let pickedWord = randomWord(wordDirectory);






//recieve user input and show it on screen.

const btn = document.getElementById("btn");
console.log(pickedWord);

btn.addEventListener("click", function(e) {
  e.preventDefault();
  const li = document.createElement("li");
  const list = document.getElementById("list");
  const userGuess = document.getElementById("userInput").value;

  /*Compare---------*/

  if (userGuess === pickedWord) {
    li.style.color = 'green';
  } else {
    let comp1 = userGuess.split('');
    let comp2 = pickedWord.split('');
    console.log(comp1);
  }
  const word = document.createTextNode(userGuess);
  li.appendChild(word);
  list.appendChild(li);
});

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

#list li {
  list-style: none;
  margin-top: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Robot</title>
</head>

<body>
  <form>
    <input onkeyup="this.value = this.value.toUpperCase();" id="userInput" type="text" placeholder="Text">
    <button id="btn">Submit</button>
    <ul id="list"></ul>
  </form>

​

Answer 1

您可以使用String#includes()和String#charAt()根据pickedWord检查userGuess中的每个字符。

下面的代码片段使用结果将每个字符包装在适当颜色的span中。您可以根据需要重构生成的HTML。

/*Compare---------*/
const guessResult = document.createElement('p')
if (userGuess === pickedWord) {
  li.style.color = 'mediumseagreen';
  guessResult.appendChild(document.createTextNode(userGuess));
} else {
  userGuess.split('').forEach((char, i) => {
    const span = document.createElement('span');

    if (pickedWord.charAt(i) === char) {
      span.style.color = 'dodgerblue';
    } else if (pickedWord.includes(char)) {
      span.style.color = 'tomato';
    }

    span.appendChild(document.createTextNode(char));
    guessResult.appendChild(span);
  });
}

显示工作代码段：

​

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* const wordDirectory = ["ABOUT", "ABOVE", "ACTOR", "ACUTE", "ADEPT", "ADMIT", "ADOPT", "ADORE", "ADULT", "AFTER", "AGILE", "AGREE", "AISLE", "ALBUM", "ALERT", "ALIEN", "ALIKE", "ALIVE", "ALLOW", "ALONG", "ALOUD", "ALTER", "AMBER", "AMEND", "AMPLE", "AMPLY", "AMUSE", "ANGEL", "ANGLE", "ANKLE", "APPLE", "APPLY", "APRON", "ARROW", "ASSET", "AVERT", "AVOID", "BACON", "BAKER", "BASIC", "BASIL", "BASIN", "BATHE", "BEACH", "BEARD", "BEAST", "BEATS", "BEGIN", "BEGUN", "BEING", "BELOW", "BIRCH", "BIRTH", "BLACK", "BLANK", "BLINK", "BLOWN", "BLUSH", "BOARD", "BOAST", "BONUS", "BOOST", "BOUND", "BOWEL", "BRAID", "BRAIN", "BRAKE", "BRAND", "BRAVE", "BREAD", "BREAK", "BRIDE", "BRIEF", "BRING", "BRISK", "BROKE", "BROOM", "BROWN", "BULKY", "BUNCH", "BUYER", "CABIN", "CABLE", "CAMEL", "CANDY", "CATER", "CHAIN", "CHAIR", "CHALK", "CHARM", "CHART", "CHASM", "CHEAP", "CHIEF", "CHINA", "CHIPS", "CHOKE", "CHOPS", "CIGAR", "CLAIM", "CLAMP", "CLASP", "CLASS", "CLEAN", "CLEAR", "CLIMB", "CLOAK", "CLONE", "CLOSE", "CLOTH", "CLOUD", "CLOVE", "CLOWN", "COAST", "CORAL", "COUNT", "CRAFT", "CRANE", "CRANK", "CRAWL", "CRISP", "CROSS", "CROWD", "CROWN", "CRUSH", "CRUST", "CURVE", "DAILY", "DAIRY", "DANCE", "DATUM", "DECAY", "DECOR", "DELAY", "DEVIL", "DIARY", "DINER", "DIRTY", "DISCO", "DIVER", "DOUBT", "DOUGH", "DRAFT", "DRAIN", "DRAWN", "DREAM", "DRESS", "DRINK", "DRIVE", "EARLY", "EARTH", "EIGHT", "ELBOW", "EMAIL", "EMPTY", "ENJOY", "EQUAL", "EQUIP", "ETHIC", "EXACT", "EXIST", "EXTRA", "FACET", "FAIRY", "FAITH", "FALSE", "FANCY", "FAULT", "FAVOR", "FEAST", "FETCH", "FIBER", "FIELD", "FINAL", "FIRST", "FLAIR", "FLAKE", "FLASK", "FLICK", "FLOAT", "FLOCK", "FLOWN", "FLUSH", "FLUTE", "FOCAL", "FOCUS", "FORCE", "FORUM", "FOUND", "FRAME", "FRANK", "FRAUD", "FRESH", "FRONT", "FROST", "FROZE", "FRUIT", "FUNGI", "FUNNY", "GHOST", "GIVEN", "GLASS", "GLAZE", "GLOBE", "GLORY", "GLOVE", "GRACE", "GRADE", "GRAIN", "GRAND", "GRAPE", "GRAPH", "GRASP", "GRASS", "GRAVY", "GREAT", "GREET", "GRILL", "GROUP", "GROWN", "GUARD", "GUESS", "GUEST", "GUIDE", "HABIT", "HAIRY", "HAPPY", "HARDY", "HASTE", "HAUNT", "HEART", "HEAVY", "HEFTY", "HONEY", "HORSE", "HOTEL", "HOUSE", "HUMAN", "HUMID", "HUMOR", "HUSKY", "IDEAL", "IMAGE", "IMPLY", "INCUR", "INDEX", "INFER", "INFRA", "INLET", "INNER", "INPUT", "INSET", "IVORY", "JEANS", "JOINT", "JUICE", "LABOR", "LADEN", "LAPSE", "LARGE", "LATEX", "LAUGH", "LAYER", "LEAFY", "LEANS", "LEARN", "LEMON", "LIGHT", "LINER", "LIVER", "LIVES", "LODGE", "LOFTY", "LOGIC", "LOVER", "LOWER", "LUCID", "LUCKY", "LUNCH", "LYMPH", "MACRO", "MAGIC", "MAIZE", "MAJOR", "MAKER", "MANGO", "MAPLE", "MARCH", "MATCH", "MEDAL", "MEDIA", "MERCY", "MERIT", "METAL", "MICRO", "MIDST", "MIGHT", "MINOR", "MINUS", "MIXER", "MODEL", "MOIST", "MONEY", "MONTH", "MORAL", "MOUNT", "MOUSE", "MOUTH", "MOVER", "MOVIE", "MULTI", "MUSIC", "NAIVE", "NEWLY", "NEXUS", "NICHE", "NIGHT", "NINJA", "NOBLE", "NODAL", "NOISE", "NOISY", "NORTH", "NOTCH", "NOTED", "NOVEL", "NURSE", "OCEAN", "OFTEN", "OLIVE", "ONSET", "OPERA", "OPTIC", "ORBIT", "ORGAN", "OTHER", "OUGHT", "OUNCE", "OUTER", "OVERT", "OWING", "OWNED", "OWNER", "OXIDE", "PACED", "PAINT", "PANIC", "PANTS", "PARTY", "PASTE", "PATCH", "PATIO", "PAUSE", "PAVED", "PAYER", "PEACH", "PEARL", "PEDAL", "PHASE", "PHONE", "PIANO", "PILOT", "PINCH", "PIVOT", "PIZZA", "PLACE", "PLAIN", "PLANE", "PLANK", "PLANT", "PLATE", "PLEAD", "PLUCK", "POINT", "POKER", "POLAR", "PORCH", "POUCH", "POUND", "POWER", "PRESS", "PRICE", "PRIDE", "PRIME", "PRINT", "PRIZE", "PRONE", "PROUD", "PROVE", "PUNCH", "PUPPY", "PURGE", "PURSE", "QUAIL", "QUEEN", "QUERY", "QUEST", "QUICK", "QUIET", "QUILT", "QUITE", "QUOTA", "QUOTE", "RADIO", "RAINY", "RAISE", "RANCH", "RANGE", "RAPID", "RATIO", "REACH", "REACT", "READY", "REALM", "REGAL", "REIGN", "RELAX", "RELAY", "RELIC", "REMIT", "REPAY", "REPLY", "RESIN", "RIDGE", "RIGHT", "RINSE", "RISKY", "RIVAL", "ROAST", "ROCKY", "ROMAN", "ROUGH", "ROUND", "ROYAL", "RUSTY", "SADLY", "SAINT", "SALON", "SALTY", "SANDY", "SATIN", "SAUCE", "SCALE", "SCARE", "SCARF", "SCARY", "SCENT", "SCORE", "SCOUT", "SCREW", "SERUM", "SETUP", "SHADE", "SHADY", "SHAKE", "SHAKY", "SHAME", "SHAPE", "SHARE", "SHARK", "SHARP", "SHAVE", "SHEAR", "SHELF", "SHELL", "SHIFT", "SHINE", "SHIRT", "SHOCK", "SHORE", "SHORT", "SHOUT", "SHOVE", "SHOWN", "SHRUB", "SHRUG", "SIGHT", "SIGMA", "SILKY", "SINCE", "SIXTY", "SKATE", "SKILL", "SKIRT", "SLACK", "SLATE", "SLEEP", "SLEPT", "SLICE", "SLICK", "SLIDE", "SLING", "SLUMP", "SMALL", "SMART", "SMILE", "SMOKE", "SMOKY", "SNACK", "SNAIL", "SNAKE", "SNEAK", "SOBER", "SOLAR", "SOLVE", "SOUND", "SOUTH", "SPACE", "SPADE", "SPARE", "SPARK", "SPEAK", "SPEAR", "SPELL", "SPICE", "SPICY", "SPIKE", "SPILL", "SPINE", "SPLIT", "SPOIL", "SPOKE", "SPORT", "SPRAY", "SQUAD", "SQUAT", "SQUID", "STACK", "STAFF", "STAGE", "STAIN", "STAIR", "STAKE", "STALE", "STAMP", "STAND", "STARE", "STEAD", "STEAK", "STEAL", "STEAM", "STEEL", "STERN", "STICK", "STILL", "STING", "STOCK", "STONE", "STORE", "STORM", "STORY", "STOVE", "STRAP", "STRAW", "STRAY", "STUCK", "STUDY", "STUFF", "STUMP", "STYLE", "SUGAR", "SUITE", "SUNNY", "SUPER", "SWAMP", "SWEAT", "SWEPT", "SWIFT", "SWINE", "SWING", "SWIRL", "SYRUP", "TABLE", "TAKEN", "TEACH", "TEMPO", "THANK", "THEIR", "THICK", "THING", "THINK", "THIRD", "THORN", "THOSE", "THREE", "THROW", "THUMB", "THYME", "TIDAL", "TIGER", "TIMER", "TODAY", "TOKEN", "TONIC", "TOUCH", "TOUGH", "TOWEL", "TOWER", "TOXIC", "TOXIN", "TRACE", "TRACK", "TRADE", "TRAIL", "TRAIN", "TRASH", "TREAD", "TREND", "TRIAD", "TRIAL", "TRIBE", "TRICK", "TWICE", "TWINS", "ULCER", "ULTRA", "UNCLE", "UNDER", "UNIFY", "UNITE", "UNITY", "UPSET", "URBAN", "USAGE", "VAGUE", "VALID", "VALUE", "VIDEO", "VIRAL", "VITAL", "VOCAL", "VODKA", "VOICE", "VOWEL", "WAFER", "WAGED", "WAGER", "WAGON", "WAIST", "WAIVE", "WASTE", "WATCH", "WATER", "WEARY", "WEIGH", "WEIRD", "WHALE", "WHARF", "WHEAT", "WHILE", "WHITE", "WHOLE", "WHOSE", "WIDEN", "WIDTH", "WINDY", "WOMAN", "WOMEN", "WORLD", "WORSE", "WORST", "WORTH", "WOULD", "WOUND", "WOVEN", "WRECK", "WRITE", "WRONG", "YEAST", "YIELD", "YOUNG", "YOUTH"];
*/

// generate random word for user and robot to guess

const randomWord = function (array) {
  return array[Math.floor(Math.random() * array.length)];
}

let pickedWord = randomWord(wordDirectory);


//recieve user input and show it on screen.

const btn = document.getElementById("btn");
console.log(pickedWord);

btn.addEventListener("click", function (e) {
  e.preventDefault();
  const li = document.createElement("li");
  const list = document.getElementById("list");
  const userGuess = document.getElementById("userInput").value;

  /*Compare---------*/
  const guessResult = document.createElement('p')
  if (userGuess === pickedWord) {
    li.style.color = 'mediumseagreen';
    guessResult.appendChild(document.createTextNode(userGuess));
  } else {
    userGuess.split('').forEach((char, i) => {
      const span = document.createElement('span');

      if (pickedWord.charAt(i) === char) {
        span.style.color = 'dodgerblue';
      } else if (pickedWord.includes(char)) {
        span.style.color = 'tomato';
      }
      
      span.appendChild(document.createTextNode(char));
      guessResult.appendChild(span);
    });
  }

  li.appendChild(guessResult);
  list.appendChild(li);
});

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

#list li {
  list-style: none;
  margin-top: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Robot</title>
</head>

<body>
  <form>
    <input onkeyup="this.value = this.value.toUpperCase();" id="userInput" type="text" placeholder="Text">
    <button id="btn">Submit</button>
    <ul id="list"></ul>
  </form>

​