如何使這個 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