Fatal编程技术网
  • javascript/
  • 如何在几个不同的函数中插入由提示收集的信息以显示在JavaScript中的Div元素中？

如何在几个不同的函数中插入由提示收集的信息以显示在JavaScript中的Div元素中？

javascript function

如何在几个不同的函数中插入由提示收集的信息以显示在JavaScript中的Div元素中？,javascript,function,global-variables,prompt,Javascript,Function,Global Variables,Prompt,我试图通过提示从用户那里收集信息，每个提示都有自己的功能。正如我已经测试过的那样，这些函数各自独立工作。接下来，我尝试使用函数financialInfoDisplay（）在Div中显示信息，但收到以下错误消息 未捕获的TypeError:无法在处将属性“innerHTML”设置为null 金融信息显示 并且提示不会显示在浏览器中。这是为什么？我如何修复它 我甚至尝试在每个函数中包含将.innerHTML添加到div的代码，这很有效，但一旦我向div添加另一个提示符，第一个提示符就会消失 我甚至尝

我试图通过提示从用户那里收集信息，每个提示都有自己的功能。正如我已经测试过的那样，这些函数各自独立工作。接下来，我尝试使用函数financialInfoDisplay（）在Div中显示信息，但收到以下错误消息

未捕获的TypeError:无法在处将属性“innerHTML”设置为null 金融信息显示

并且提示不会显示在浏览器中。这是为什么？我如何修复它

我甚至尝试在每个函数中包含将.innerHTML添加到div的代码，这很有效，但一旦我向div添加另一个提示符，第一个提示符就会消失

我甚至尝试在financialinfosdisplay（）中添加参数，而不是全局变量，如var userdrawing、userName、depositAmount，然后在调用上述函数时将这些变量作为参数传递，但这也不起作用

//全局变量
var用户取款、用户名、存款金额；
//从DOM获取元素
var$=函数（id）{
“严格使用”；
返回窗口.document.getElementById（id）；
};
//获取用户名
函数名提示符（）{
“严格使用”；
用户名=window.prompt（“请输入您的姓名”）；
返回用户名；
}
//获取存款金额
函数depositAmountPrompt（）{
“严格使用”；
存款金额=window.prompt（“请输入您要存款的金额”）；
返还存款金额；
}
//获取取款金额
函数提取Alamount（）{
“严格使用”；
userdrawing=window.prompt（“请输入您想从帐户中提取的金额”）；
退换货；
}
//在DIV中显示提示
函数financialInfoDisplay（）{
“严格使用”；
var infoDisplay=window.document.getElementById（'infoDisplay'）。innerHTML=userName+depositAmount+userDrawing；
返回信息显示；
}
financialInfoDisplay（）；
//处理所有事件侦听器
函数init（）{
“严格使用”；
$（'nameBtn'）.addEventListener（“单击”，名称提示）；
$（'depositBtn'）.addEventListener（“单击”，存款金额提示）；
$（'drawrelbtn'）。添加EventListener（“单击”，drawrecalamount）
}

addEventListener（“加载”，init）
您应该在每个单击事件中调用
financialInfoDisplay
，并在
financialInfoDisplay
中选中undefined，在您的情况下不需要返回值

使用代码函数
financialInfoDisplay（）
在加载时仅调用1次

您不应该放入header标记，nameBtn没有生成，无法为其设置事件处理程序

HTML内容：

<style>
  body {
    width: 500px;
    margin: 0 auto;
  }

  #infoDisplay {
    border: 3px solid black;
    height: 250px;
  }
</style>

<body>
  <button type="button" id="nameBtn" value>Name</button>
  <button type="button" id="depositBtn">Deposit</button>
  <button type="button" id="withdrawlBtn">Withdrawl</button>
  <div id="infoDisplay"></div>
  <script>
    //GLOBAL VARIABLES
    var userWithdrawal, userName, depositAmount;

    //GETS ELEMENT FROM DOM
    var $ = function (id) {
      "use strict";
      return window.document.getElementById(id);
    };
    //GETS USER NAME 
    function namePrompt() {
      "use strict";
      userName = window.prompt("Please enter your name");
      financialInfoDisplay();
      //return userName;
    }

    //GETS DEPOSIT AMOUNT
    function depositAmountPrompt() {
      "use strict";
      depositAmount = window.prompt("Please enter the amount of money you would like to deposit");
      //return depositAmount;
      financialInfoDisplay();

    }
    //GETS WITHDRAWAL Amount
    function withdrawalAmount() {
      "use strict";
      userWithdrawal = window.prompt("Please enter the amount of money you would like to withdrawal from your account");
      financialInfoDisplay();
      //return userWithdrawal;
    }

    //DISPLAYS THE PROMPTS WITHIN A DIV
    function financialInfoDisplay() {
      "use strict";
      if (userName != undefined) {
        var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
      }
      if (depositAmount != undefined) {
        var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
      }
      if (userWithdrawal != undefined) {
        var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
      }

      //return infoDisplay;
    }

    //HANDLES ALL EVENT LISTENERS
    function init() {
      "use strict";
      $('nameBtn').addEventListener("click", namePrompt);
      $('depositBtn').addEventListener("click", depositAmountPrompt);
      $('withdrawlBtn').addEventListener("click", withdrawalAmount)

    }
    window.addEventListener("load", init);
  </script>
</body>

function financialInfoDisplay() {
    "use strict";
    if(userName != undefined){
    var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
    }
    if(depositAmount != undefined){
    var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
    }
    if(userWithdrawal != undefined){
    var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
    }

    //return infoDisplay;
}

正文{
宽度：500px；
保证金：0自动；
}
#信息显示{
边框：3倍纯黑；
高度：250px；
}


名称
押金
撤回
您应该在每个单击事件中调用
FinancialInfo显示
，并在
FinancialInfo显示
中选中未定义，在您的情况下不需要返回值

使用代码函数
financialInfoDisplay（）
在加载时仅调用1次

您不应该放入header标记，nameBtn没有生成，无法为其设置事件处理程序

HTML内容：

<style>
  body {
    width: 500px;
    margin: 0 auto;
  }

  #infoDisplay {
    border: 3px solid black;
    height: 250px;
  }
</style>

<body>
  <button type="button" id="nameBtn" value>Name</button>
  <button type="button" id="depositBtn">Deposit</button>
  <button type="button" id="withdrawlBtn">Withdrawl</button>
  <div id="infoDisplay"></div>
  <script>
    //GLOBAL VARIABLES
    var userWithdrawal, userName, depositAmount;

    //GETS ELEMENT FROM DOM
    var $ = function (id) {
      "use strict";
      return window.document.getElementById(id);
    };
    //GETS USER NAME 
    function namePrompt() {
      "use strict";
      userName = window.prompt("Please enter your name");
      financialInfoDisplay();
      //return userName;
    }

    //GETS DEPOSIT AMOUNT
    function depositAmountPrompt() {
      "use strict";
      depositAmount = window.prompt("Please enter the amount of money you would like to deposit");
      //return depositAmount;
      financialInfoDisplay();

    }
    //GETS WITHDRAWAL Amount
    function withdrawalAmount() {
      "use strict";
      userWithdrawal = window.prompt("Please enter the amount of money you would like to withdrawal from your account");
      financialInfoDisplay();
      //return userWithdrawal;
    }

    //DISPLAYS THE PROMPTS WITHIN A DIV
    function financialInfoDisplay() {
      "use strict";
      if (userName != undefined) {
        var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
      }
      if (depositAmount != undefined) {
        var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
      }
      if (userWithdrawal != undefined) {
        var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
      }

      //return infoDisplay;
    }

    //HANDLES ALL EVENT LISTENERS
    function init() {
      "use strict";
      $('nameBtn').addEventListener("click", namePrompt);
      $('depositBtn').addEventListener("click", depositAmountPrompt);
      $('withdrawlBtn').addEventListener("click", withdrawalAmount)

    }
    window.addEventListener("load", init);
  </script>
</body>

function financialInfoDisplay() {
    "use strict";
    if(userName != undefined){
    var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
    }
    if(depositAmount != undefined){
    var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
    }
    if(userWithdrawal != undefined){
    var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
    }

    //return infoDisplay;
}

正文{
宽度：500px；
保证金：0自动；
}
#信息显示{
边框：3倍纯黑；
高度：250px；
}


名称
押金
撤回
查看我在下面的演示和显示方式。这是在es6上

您将收到错误：
Uncaught TypeError:无法在financialInfoDisplay中将属性'innerHTML'设置为null
，因为您是在DOM中创建html元素之前启动javascript的。这就是它无法找到
innerHTML
属性的原因

您可能希望将js加载到主体中，这样您就可以在js中使用所有元素

//全局变量
让提示=[
{文本：“请输入您的姓名”，回复：}，
{text:“请输入您想存入的金额”，回答：“}，
{文本：“请输入您想从您的帐户中提取的金额”，回答：}
];
//选择元素
常量$=（id）=>{
returndocument.querySelector（`${id}`）；
};
//提示
常量提示器=（配置）=>{
config.response=window.prompt（config.text）；
}
//显示提示
const displayResponses=（）=>{
让我们回答=”；
prompts.forEach（（prompt，idx）=>{
response=response+prompt.response；
document.getElementById（'infoDisplay'）.innerHTML=response；
});
}
//钮扣
常量init=（）=>{
$（'nameBtn'）。addEventListener（“单击”，（）=>{
提示器（提示[0]）；
显示响应（）；
});
$（'depositBtn'）。addEventListener（“单击”，（）=>{
提示器（提示[1]）；
显示响应（）；
});
$（'drawrelbtn'）。addEventListener（“单击”，（）=>{
提示器（提示[2]）；
显示响应（）；
});
};
addEventListener（“加载”，init）

正文{
宽度：500px；
保证金：0自动；
}
#信息显示{
边框：3倍纯黑；
高度：250px；
}




名称
押金
撤回

查看我在下面的演示和显示方式。这是在es6上

您将收到错误：
Uncaught TypeError:无法在financialInfoDisplay中将属性'innerHTML'设置为null
，因为您是在DOM中创建html元素之前启动javascript的。这就是它无法找到
innerHTML
属性的原因

您可能希望将js加载到主体中，这样您就可以在js中使用所有元素



//全局变量
让提示=[
{文本：“请输入您的姓名”，回复：}，
{text:“请输入o的金额