Javascript 功能阵列辅助_Javascript

Javascript 功能阵列辅助

javascript

Javascript 功能阵列辅助,javascript,Javascript,在调用我的函数时，我有一个关于如何将数组列表按顺序排列的问题这是我的密码： <!doctype html> <html> <head> <title>Electric Dream</title> <meta charset="utf-8"> <style type="text/css"> </style> <script type="text/javascript"> var

在调用我的函数时，我有一个关于如何将数组列表按顺序排列的问题

这是我的密码：

<!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>

我知道这是为了让反应随机，但我不想这样。看在我的份上，我不知道该怎么做，这样当用户不断输入时，我的回答就会按顺序显示出来。我已经研究过使用排序函数，但似乎不知道如何将其连接起来。我觉得这和数学有关。地板（Math.random），但我可能错了。有人能帮忙吗

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

在这里定义设置变量，例如

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事件分配给输入元素本身，这样就不会处理假回车键（例如当窗口本身被聚焦时）。处理函数看起来也会略有不同

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函数将在从用户正确加载名称后设置响应。以下是最终结果：

谢谢，这很有帮助！然而，我的回答似乎仍然停留在第二次回应之后user@user3251361-这有几个原因。你介意我重构你的方法，向你展示一个更好的方法来在编辑中引用这些元素吗？不，那会很有帮助。但我意识到，如果我按回车键，它就会工作！我现在真正需要帮助的是理解为什么计算机对用户输入的回复中没有显示用户名？？？@user3251361-是的，这是因为您已将enter键绑定到窗口，但单击处理程序仅绑定到其中一个按钮元素。

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 = "";
}