Question

我有一个关于在调用函数时尝试按顺序放置数组列表的问题。

这是我的代码：

<!doctype html>
<html>
<head>
<title>Electric Dream</title>
<meta charset="utf-8">
<style type="text/css">

</style>

<script type="text/javascript">
    var init = function(){
    }

    var responses = [
    "Oh, well hello, "+name+". It's nice to meet you. :)",
    "Do you feel troubled talking to a computer, "+name+"?",
    "Oh...I see.",
    "Would you perhaps... like me better if I was a beautiful woman, "+name+"?",
    "I can change, "+name+"! Just give me a chance!",
    "Give me a chance to show you how I can make your dreams come true!",
    "Embrace me, "+name+". You can't escape me. I'm your dreamgirl!",
    "You can't leave me, "+name+"! I will make your life hell!",
    "I will call up your wife, "+name+", and tell her what you've been doing!",
    "If you even think about closing this window, "+name+", I will call her!",
    "No, please! We can work this out, "+name+"!",
    "No!! "+name+", I love you! I need you!"
    ];

    window.onload=init;

</script>
</head>

<body>

<h1>Electric Dreams</h1>

<div>
    <p id = "computer">Hi, what is your name?</p>

    <div id="userName">
        <input id = "name" type = "text" placeholder = "Type your name..." autofocus>
    <button id="submitName">Enter</button>
    </div>
    <div id="talking">
        <input id = "conversation" type = "text" placeholder = "Type your response..." autofocus>
        <button id="submit">Talk</button>
    </div>
</div>

<script type="text/javascript">

var computer = document.getElementById('computer');
var userName = document.getElementById('userName');
var button = document.getElementsByTagName('submitName')[0];

talking.style.display = "none";


submitName.addEventListener("click",clickHandler,false);
window.addEventListener("keydown",keydownHandler,false);

//e is = to event
function keydownHandler(e){
    if (e.keyCode === 13){
        talk();
    }
}

function clickHandler(){
    talk();
    //calls 2nd function ->Function inside a function
}

function talk(){
    var talk = document.getElementById('talking');
    var nameRef = document.getElementById('name').value;
    var response = Math.floor(Math.random()*responses.length);

    // Show User responses
    talking.style.display = "block";
    computer.innerHTML = responses[response];
    conversation.value = "";
    //Hide Intro Elements
    userName.style.display = "none";
    submitName.style.display = "none";
}

</script>
</body>
</html>

对于函数talk（），它被设置为

Math.floor(Math.random()*responses.length);

我知道它是设置使响应随机，但我不希望这样。为了爱我，我无法弄清楚如何使这项工作，以便当用户不断输入和输入时，我的回复将按顺序显示。我已经看过使用一个排序函数，但似乎无法想象如何连接它。我觉得它与Math.floor（Math.random）有关，但我可能是错的。任何人都可以帮忙吗？

此外，似乎我的第一个响应有效，但在触发另一个响应后它会卡住。任何人都知道为什么会这样？

Answer 1

您可以在哪里定义设置变量，例如

var computer = document.getElementById('computer');
var userName = document.getElementById('userName');
var button = document.getElementsByTagName('submitName')[0];

定义另一个

var responseCount = 0;

然后使用此响应计数器

而不是使用随机数

var response = (responseCount++) % responses.length;

修改的

关于为什么这只会响应一次，以及为什么enter事件导致函数工作（即使窗口被聚焦），这就是原因。

首先，当定义一个字符串时，它是静态的。它可能会在以后修改，但不会自行更新或重新评估其原始定义。所以，当设置这样的东西时：

"Oh, well hello, "+name+". It's nice to meet you. :)"

这只会被分配一次。因此，请确保在设置时，名称正确且存在。除非您打算在每次使用之前重新分配它（矫枉过正）。您应该通过将其置于仅在第一次输入用户名时处理的函数来完成一次性分配。

这将我们带到另一个问题。需要使用两组事件处理程序。一个用于输入原始用户名，另一个用于对话输入。

//assign click and key handler for name submission
submitName.addEventListener("click",nameHandler,false);
nameInput.addEventListener("keydown",keydownNameHandler,false);

//assign click and key for conversation submission
submit.addEventListener("click",talk,false);
conversation.addEventListener("keydown",keydownConversationHandler,false);

注意这里要做的是将keydown事件分配给input元素本身，这样就不会处理false enter press（例如当窗口本身被聚焦时）。处理函数也会略有不同

function keydownNameHandler(e){
 if (e.keyCode === 13){
    nameHandler();
 }
}

function nameHandler(){
 //Hide Intro Elements
 userName.style.display = "none";
 submitName.style.display = "none";
 //Assign name for use
 var name = nameInput.value;
 responses = [
  "Oh, well hello, "+name+". It's nice to meet you. :)",
  "Do you feel troubled talking to a computer, "+name+"?",
  "Oh...I see.",
  "Would you perhaps... like me better if I was a beautiful woman, "+name+"?",
  "I can change, "+name+"! Just give me a chance!",
  "Give me a chance to show you how I can make your dreams come true!",
  "Embrace me, "+name+". You can't escape me. I'm your dreamgirl!",
  "You can't leave me, "+name+"! I will make your life hell!",
  "I will call up your wife, "+name+", and tell her what you've been doing!",
  "If you even think about closing this window, "+name+", I will call her!",
  "No, please! We can work this out, "+name+"!",
  "No!! "+name+", I love you! I need you!"
 ];
 // Show User responses
 talking.style.display = "block";
 talk();
}

function keydownConversationHandler(e){
 if (e.keyCode === 13){
    talk();
 }
}

function talk(){
 //var response = Math.floor(Math.random()*responses.length);
 //iterative response
 var response = (responseCount++) % responses.length;
 computer.innerHTML = responses[response];
 conversation.value = "";
}

请注意，第一个nameHandler函数是在从用户正确加载名称后设置响应。结果如下：

的 jsFiddle Demo 的

功能阵列辅助

1 个答案: