How can I make this javascript function to allow more than 1 value to be entered into a input box wi-CodePudding

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 >
      <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 >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/

CodePudding user response：

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 >
      <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 >Colour by numbers</button></p>
  </body>
</html>

CodePudding user response：

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);