Get/Set value using Map in JavaScript

Get/Set value using Map in JavaScript

by jimcute

HTML

<h3>
Get / Set array of strings using Map in JavaScript
</h3>
<p>
Play around with it by inputting a value in textbox and clicking on "Set / Get value" button
</p>
<input id="textToSet" placeholder="Enter some string to set"/>
<br>
<button class="set-btn" onclick="setValue()">
Set / Get value
</button>
<br>
<p id="values">
</p>

CSS

body {
  font-family: 'Verdana';
}

input {
  height: 20px;
  width: 190px;
  font-family: 'Verdana';
}

.set-btn {
  margin-top: 10px;
  font-family: 'Verdana';
}

JavaScript

let dataHolder = new Map();
const dataKeyName = 'data';
const element = document.getElementById('values');

function setValue() {
	const txtValue = document.getElementById('textToSet');
  _setDataInHolder(dataKeyName, txtValue.value);
  getValue();
  txtValue.value = '';
}

function _setDataInHolder(key, data) {
	let existing = dataHolder.get(key);
  let arrayToSave = [data];
  if (existing) {
    arrayToSave = existing.concat(data);
  }
  dataHolder.set(key, arrayToSave);
}

function getValue() {
	element.innerHTML = '';
	let data = dataHolder.get(dataKeyName);
  for(let i = 0; i < data.length; i++) {
  	element.innerHTML += `${data[i]} <br>`;
  }
}