如何在数组中查找不匹配的数字

Question

这是Reactjs中的数字记忆游戏

---

第一个数字随机出现。例如：123。

第二个数字是我要输入的：123。

这是正确的。

---

因此，如果我输入错误，例如124，则应划掉4。

输出应该是这样的：

<div>
<span>1</span>
<span>2</span>
<span className="wrong">4</span>
</div>

更多示例：

随机编号：4573

输入：4674

输出：4674

---

random_num:4573

输入：4674761

输出：467411

---

random_num:123

输入：123456

输出：123456

Answer 1

根据您的示例，我认为这些数字也应该在正确的位置。

由于您没有提供一个用户输入短于随机数的例子，我假设在这种情况下，这样的选项要么不存在，要么您正在以其他方式处理它。

既然我的假设已经定义好了，您就可以通过将用户输入的数字转换为字符串并逐个比较符号来迭代用户输入的数量。你需要检查位置i处的符号是否在两个数字上都相等(input[i]===random_num[i](，只是不要忘记，在迭代输入时，你可以将i增加到random_num的长度之外，你应该检查这些情况，并将每个input[i]标记为错误，其中i>随机长度

Answer 2

这是我的尝试

class NumberMemoryGame extends React.Component {
constructor(props) {
super(props);
this.state = {value: '', answer: '123456'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Guess:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
<div>
{[...this.state.value].map((char, i) => (
<span className={`${(char === this.state.answer[i]) ? 'right' : 'wrong'}`}>
{char}
</span>))}
</div>
</div>
);
}
}

你可以在这里找到JS Fiddle。

Answer 3

假设您将两个条目作为数组传递给组件，并假设array_1是原始条目，array_2是第二个条目，那么您所要做的就是

function App({ array_1, array_2 }) {
return (
<div>
{array_2.map((val, i) => {
if (val === array_1[i]) {
return <span>{val}</span>;
}
return <span className="wrong">{val}</span>;
})}
</div>
);
}

Answer 4

注意：Vanilla JavaScript解决方案

我想你可以用这样的东西：

• 突出显示所有与字符串不匹配的元素

const input = document.getElementById("data");
const results = document.getElementById("results");
function check() {
results.innerHTML = "";
let message = ``;
let random = String(getRandom()).split("");
if (random === input.value) {
console.log("Win");
} else {
if (random.length >= input.value) {
random.forEach((r, i) => {
let span = document.createElement("span");
if (r !== input.value[i])
span.classList.add("wrong");
span.innerText = input.value[i];
results.append(span);
});
} else {
let inputValue = input.value.split("");
inputValue.forEach((r, i) => {
let span = document.createElement("span");
if (r !== random[i])
span.classList.add("wrong");
span.innerText = input.value[i];
results.append(span);
});
}
}
}
function getRandom() {
return Math.floor(Math.random() * 1000);
}

.wrong {
background: red;
color: #fff;
}

<input type="number" id="data">
<button onClick="check()">SUBMIT</button>
<div id="results"></div>

工作Fiddle