0
228
ViewsHow can I make this javascript function to allow more than 1 value to be entered into a input box with separated by a space?
I have the this html and javascript code
<!doctype html>
<html lang="en" data-id="0101">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
font-family: arial, helvetica, san-serif;
box-sizing: border-box;
font-size: 16px;
}
body {
padding: 1rem;
margin: 0;
}
.fb {
display: flex;
justify-content: space-between;
margin: 0 0 1em 0;
}
div>button {
width: 9%;
border: 2px solid black;
text-align: center;
padding: 0.5rem;
background: lightgray;
}
</style>
</head>
<body>
<div class="fb">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
</div>
<p><input> <input></p>
<p><button class="action-button">Colour by numbers</button></p>
</body>
</html>
javaScript:
function colourByNumbers() {
inputs = document.getElementsByTagName('input')[0].value
colour = document.getElementsByTagName('input')[1].value
buttons = document.getElementsByTagName('button')[inputs - 1]
buttons.style.background = document.getElementsByTagName('input')[1].value
}
document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers);
what it does it you enter a number in and enter a color. the box with the entered number will change its background to the color entered like this:
I'm stuck on how to make the function take in more than 1 input e.g:
so I enter in 2 numbers separated by a space(4 and 7) and their boxes both turn red
I've included a jsfiddle incase anyone wants to test the code themselves. Any help appreciated! https://jsfiddle.net/waxhtekj/2/
2 answers
Answer question0
remember that the input is just a string. Just use the split function to get get each value
function colourByNumbers() {
input = document.getElementsByTagName('input')[0].value
inputs = input.split(" ")
colour = document.getElementsByTagName('input')[1].value
for (let i = 0; i < inputs.length; i++){
buttons = document.getElementsByTagName('button')[inputs[i] - 1]
buttons.style.background = document.getElementsByTagName('input')[1].value
}
}
document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers);<!doctype html>
<html lang="en" data-id="0101">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
font-family: arial, helvetica, san-serif;
box-sizing: border-box;
font-size: 16px;
}
body {
padding: 1rem;
margin: 0;
}
.fb {
display: flex;
justify-content: space-between;
margin: 0 0 1em 0;
}
div>button {
width: 9%;
border: 2px solid black;
text-align: center;
padding: 0.5rem;
background: lightgray;
}
</style>
</head>
<body>
<div class="fb">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
</div>
<p><input> <input></p>
<p><button class="action-button">Colour by numbers</button></p>
</body>
</html>0
What you want to do is change your function so that instead of just taking the value from the buttons input and using it, run a String.prototype.split on it and use a loop. Your JavaScript would look something like this:
function colourByNumbers() {
inputs = document.getElementsByTagName('input')[0].value.split(" ")
colours = document.getElementsByTagName('input')[1].value
for (const input of inputs) {
document.getElementsByTagName('button')[input - 1].style.background = document.getElementsByTagName('input')[1].value
}
}
document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers);
Your JavaScript and HTML are also slightly malformed. For your HTML, you shouldn't use a plain <input>. Instead, specify the required attributes for your input tag like so: <input type="text" />. Also note the />, which means to close the tag without content.
For your JavaScript, you a few problems. The first thing is how you are selecting your elements. Since you are only getting one element, use document.getElementByClassName, with Element instead of Elements to only get one element. That also removes the need for the [0].
Next you have the function variables. You are not declaring proper variables, use a const in front of the definition. For settings the background, you already have selected the value, so you do not need to do it again.
Refactored JS Code:
function colourByNumbers() {
const inputs = document.getElementByTagName('input')[0].value.split(" ")
const colour = document.getElementByTagName('input').value
for (const input of inputs) {
document.getElementsByTagName('button')[input - 1].style.background = colour;
}
}
document.getElementByClassName('action-button').addEventListener("click", colourByNumbers);