JSFiddle - React, Tailwind, and code Playground

by Dan Mathisen

HTML

<p>
  Test by typing 1, 2, or 3. Any other value will return "Value not found"
</p>

<form>
  <p>
    Type stuff here:
    <input type="text" class="userInput" />
  </p>
  <p>
    And let's output stuff here:
    <input type="text" class="lookupInput" />
  </p>
</form>

JavaScript

// some map/table that stores keys and values 
const valueMap = {
	1: "Text for value 1",
  2: "Text for value 2",
  3: "Text for value 3",
}

// create variables to access input boxes
const userInput = document.querySelector('.userInput');
const lookupInput = document.querySelector('.lookupInput');

// on user input change
userInput.addEventListener('keyup', e => {
	// get the user's input
	const inputVal = e.target.value;
  
  if (valueMap[inputVal] != null) {
  	// it exists in the map, so set lookupInput to the value
  	lookupInput.value = valueMap[inputVal];
  } else {
  	// user's input doesn't exist in the map
  	lookupInput.value = "Value not found";
  }
});


/*
NOTE:
Maybe would prefer using a JS Map

const valueMap = new Map();
valueMap.set('1', 'Text for value 1');
valueMap.set('2', 'Text for value 2');
valueMap.set('3', 'Text for value 3');

...

if (valueMap.has(inputVal)) {
	lookupInput.value = valueMap.get(inputVal)
}

*/