我有這個 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>
腳本：
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);
它是做什么的，你輸入一個數字并輸入一種顏色。輸入數字的框將其背景更改為輸入的顏色，如下所示：
我被困在如何使函式接受超過 1 個輸入，例如：
所以我輸入了由空格分隔的 2 個數字（4 和 7），它們的框都變成紅色
我已經包含了一個 jsfiddle，以防有人想自己測驗代碼。任何幫助表示贊賞！ https://jsfiddle.net/waxhtekj/2/
uj5u.com熱心網友回復：
您想要做的是更改您的函式，以便不僅僅是從buttons輸入中獲取值并使用它，而是在其String.prototype.split上運行 a并使用回圈。你的 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, withElement而不是Elements只得到一個元素。這也消除了對[0].
接下來你有函式變數。您沒有宣告正確的變數，請const在定義前使用 a 。對于設定背景，您已經選擇了該值，因此您無需再次進行設定。
重構的 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);
uj5u.com熱心網友回復：
請記住，輸入只是一個字串。只需使用 split 函式來獲取每個值
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/407193.html
標籤：
上一篇：使用JS獲取當前日期