循环迭代的 Javascript。出了点问题答案

【问题标题】：Javascript for loop iteration. Something is wrong循环迭代的 Javascript。出了点问题
【发布时间】：2021-11-25 17:49:55
【问题描述】：

我有一个名为 data 的对象列表。

还有 1 个输入标签。

我想检查数据的person1 键中是否存在输入值。如果存在，我写输入值和person2 键值。否则写I don't understand。

此代码如何给出true 的答案。这是wrong。

试试How old are you 这个。如果你输入这个它必须给I don't understand 2次和30

function SendMessage() {
    var input = document.getElementById('person'),
        sender = document.createElement('p'),
        receiver = sender.cloneNode(true),
        data = [{
            "person1": "Hey",
            "person2": "Hey, How are you?"
        }, {
            "person1": "Hello",
            "person2": "Hello friend"
        }, {
            "person1": "How old are you",
            "person2": "30"
        },
    ];

    sender.innerText = input.value;
    document.body.appendChild(sender);
    for (var i = 0; i < data.length; i++) {
        if (input.value === data[i].person1) {
            receiver.innerText = data[i].person2;
            document.body.appendChild(receiver);
            i = data.length;
        } else {
            receiver.innerText = "I don't understand";
            document.body.appendChild(receiver);
        }
    }
}

<input id="person">
<button onclick="SendMessage()">Send message</button>

【问题讨论】：

标签： javascript arrays loops for-loop

【解决方案1】：

我找到了我丢失的代码。 for 循环工作正常。我在 for 循环之前创建元素。每次迭代我都只是改变了innerText的元素。它写I don't understand。但是当它找到正确答案时。它会覆盖答案。

 

function SendMessage() { 
    var input = document.getElementById('person'), 
    sender = document.createElement('p'), 
    receiver = sender.cloneNode(true), 
    data = [{ "person1": "Hey", "person2": "Hey, How are you?" }, 
            { "person1": "Hello", "person2": "Hello friend" }, 
            { "person1": "How old are you", "person2": "30" }, ]; 
    sender.innerText = input.value; 
    document.body.appendChild(sender); 
    for (var i = 0; i < data.length; i++) { 
        if (input.value === data[i].person1) { 
            receiver.innerText = data[i].person2; 
            console.log(data[i].person2); 
            document.body.appendChild(receiver); 
            i = data.length; 
        } else { 
            console.log("I don't understand"); 
            receiver.innerText = "I don't understand"; 
            document.body.appendChild(receiver); 
        } 
    } 
}

 
<input id="person"> 
<button onclick="SendMessage()">Send message</button>

【讨论】：