How can I make this javascript function to allow more than 1 value to be entered into a input box with separated by a space?
Question
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 eg:
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
solution1
0 2022-01-10 00:37:19
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);
solution2
0 2022-01-10 00:45:18
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.