如何使这个 javascript function 允许在输入框中输入多个值并用空格分隔？

Question

我有这个 html 和 javascript 代码

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

它是做什么的，你输入一个数字并输入一种颜色。 输入数字的框将其背景更改为输入的颜色，如下所示：

我被困在如何使 function 接受超过 1 个输入，例如：

所以我输入了由空格分隔的 2 个数字（4 和 7），它们的框都变成红色

我已经包含了一个 jsfiddle，以防有人想自己测试代码。 任何帮助表示赞赏！ https://jsfiddle.net/waxhtekj/2/

Answer 1

您想要做的是更改您的 function 以便不仅仅是从buttons输入中获取值并使用它，而是在其上运行String.prototype.split并使用循环。 您的 JavaScript 看起来像这样：

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

您的 JavaScript 和 HTML 也有轻微的畸形。 对于您的 HTML，您不应该使用普通的<input> 。 相反，为您的输入标签指定所需的属性，如下所示： <input type="text" /> 。 还要注意/> ，这意味着关闭没有内容的标签。

对于您的 JavaScript，您有几个问题。 首先是你如何选择你的元素。 由于您只获得一个元素，因此请使用document.getElementByClassName ，使用Element而不是Elements来仅获得一个元素。 这也消除了对[0]的需要。

接下来你有 function 变量。 您没有声明正确的变量，请在定义前使用const 。 对于设置背景，您已经选择了该值，因此您无需再次进行设置。

重构的 JS 代码：

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

Answer 2

请记住，输入只是一个字符串。 只需使用拆分 function 即可获取每个值

 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>

如何使这个 javascript function 允许在输入框中输入多个值并用空格分隔？

问题描述

2 个解决方案

解决方案1
0 2022-01-10 00:37:19

解决方案2
0 2022-01-10 00:45:18

如何使这个 javascript function 允许在输入框中输入多个值并用空格分隔？

问题描述

2 个解决方案

解决方案1 0 2022-01-10 00:37:19

解决方案2 0 2022-01-10 00:45:18

解决方案1
0 2022-01-10 00:37:19

解决方案2
0 2022-01-10 00:45:18