从一个函数获取值并将其放入另一个函数

时间:2018-12-13 08:19:31

标签: javascript html global-variables

我需要将inputScore函数中当前持有的extractVariable的值放入assignValue函数中(此函数将inputScore的值提供给Index.html页)。我试图将inputScore存储在全局对象中以解决范围问题,但是在assignValue内部,global.scoreValue变量未定义。请问如何将inputScore转换为AssignValue?编程新手-任何帮助表示赞赏。谢谢。

global = {};


function extractVariable(inputScore) {

   global['scoreValue'] = inputScore;

};


function assignValue() { 

    document.getElementById("inputScore").value = global.scoreValue;

};

感谢大家的帮助。我非常接近解决我需要做的事情。问题似乎导致inputScore进入Index.html页。我应该首先将所有代码发布。道歉。 index.html是一个单独的文件,具有指向javascript文件(Game.js)的链接。我已经测试了链接,并且可以正常工作。在Game.js中按下按钮时,将加载index.html,在assignValue中读取Game.js函数,并将玩家得分(inputScore)插入输入值以一种形式。目前,所有要插入表单的内容是: enter image description here
我不知道为什么它不起作用。我在下面的两个文件中都包含了代码。任何帮助再次受到赞赏。

Game.js代码:

function extractVariable(inputScore) {

return inputScore;


};


function assignValue(inputScore) {  
     document.getElementById("playerScore").value = inputScore;

};



var CrystalRunner = CrystalRunner || {};

CrystalRunner.GameState = {

init: function() {
  //...code here
  }, 


create: function() {
 //...code here
  },  


 update: function() {  
//..code here
//check if the player needs to die
      if(this.player.top >= this.game.world.height) {
         this.gameOver();
      }
  },  


 gameOver: function(){

    //..code here

    this.updateHighscore();

    //..code here

   },


  updateHighscore: function(){
    this.highScore = +localStorage.getItem('highScore');


    if(this.highScore < this.myScore){
            this.highScore = this.myScore;

            this.inputScore = this.highScore; 


            this.submitScoreButton = this.game.add.sprite(this.game.world.centerX-135, this.game.world.centerY+100, 'submitScoreButton');

            this.submitScoreButton.events.onInputUp.add(function() {

                    window.location.href = "index1.php"; 

              }, this);

        extractVariable(this.inputScore);
      }


      localStorage.setItem('highScore', this.highScore);
  },


};

Index.html代码:

<?php
require_once 'dbconnect.php';

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Crystal Candy Game Login</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <link href="css/style.css" rel="stylesheet">


</head>


<body onload="assignValue(extractVariable())" class="bg"> 


    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div><!--preloader-->


    <div class="wrapper">


        <div id="main">

        <!-- Form -->
        <form id="form-style" method="post" action="crystalhandle.php" autocomplete="off">


                    <div class="form-group"> 
                        <label class="header-text"><span>First Name</span></label>
                        <input class="form-control" type="text" id="name" name="username" placeholder="Name" title="Please enter your Firstname" required="">
                    </div>


                    <div class="form-group"> 
                        <label class="header-text"><span>Score</span></label>
                        <input class="form-control" type="tel" id="playerScore" name="score" value="" readonly>
                    </div>


                    <div class="w3ls-btn form-group">       
                        <div class="wthreesubmitaits">
                        <input type="submit" name="signup" id="reg" class="button" id="next1" value="Send" style="font-family: sans-serif; font-size: 17px; font-weight: bold;"
                        </div> 
                    </div>


        </form>


        </div>

    </div>

<div id="bodytext"></div>


     <script type='text/javascript' src='js/jquery-2.2.3.min.js'></script>
     <script type="text/javascript" src="js/phaser.min.js"></script>
     <script type="text/javascript" src="js/states/Game.js"></script>

         <script>
            $(window).on('load', function() {
            $('#status').fadeOut(); 
            $('#preloader').delay(350).fadeOut('slow'); 
            $('body').delay(350).css({'overflow':'visible'});


            })
    </script>

</body>


</html>

我进行了以下更改,我认为有一个解决方案。在Index.html中,通过删除inputScore更改了以下行:

<body onload="assignValue(extractVariable())" class="bg"  >

Game.js中,我发现如果将值硬编码到extractVariable函数中(见下文),则硬编码值将传递到{{1 }}在value中标记,这就是我想要的。但是,我仍然无法弄清楚为什么这仅适用于硬编码值?

<input>

5 个答案:

答案 0 :(得分:4)

您可以通过从extractVariable返回值,然后将其作为参数传递到assignValue中来实现:

function extractVariable(inputScore) {
  return inputScore;
};


function assignValue(inputScore) {
  document.getElementById("inputScore").value = inputScore;
};

assignValue(extractVariable(inputScore));

答案 1 :(得分:1)

您必须在 assignValue()

中调用或调用 extractVariable()

var global = {};
function extractVariable(inputScore) {
   global['scoreValue'] = inputScore;
};
function assignValue() {
  extractVariable('test');
  document.getElementById("inputScore").value = global.scoreValue;
};
assignValue();
<input id="inputScore"/>

尽管在这种情况下不必使用变量,但是您可以简单地从函数中返回值:

function extractVariable(inputScore) {
   return inputScore;
};
function assignValue(input) {
  document.getElementById("inputScore").value = input;
};
assignValue(extractVariable('test'));
<input id="inputScore"/>

答案 2 :(得分:1)

请使用es6并使用let进行作用域-这是一个很好的示例:

let scoreValue = 0;

function extractVariable(inputScore) {

    scoreValue = inputScore;

};

function assignValue() {

    console.log(scoreValue);

};

extractVariable(200);
assignValue();

答案 3 :(得分:1)

  

我不知道为什么它不起作用。

The ids of HTML elements become global variables.

您有一个id inputScore元素。

您指定使用extractVariable作为参数调用inputScore

<body onload="assignValue(extractVariable(inputScore))" class="bg"> 

因此,您试图将DOM元素设置为文本输入的值。那行不通。 DOM元素的字符串表示形式就是您在屏幕快照中看到的内容

console.log(document.createElement('span').toString());


我不清楚您希望inputScore在这里指的是什么。因此,我唯一的建议是删除onload处理程序。

答案 4 :(得分:0)

我终于解决了。这是任何有兴趣的人的解决方案。我已经在Game.js代码中添加了注释,以显示我的所作所为。 Index.html仍然与我在问题中对其进行编辑时一样。感谢所有帮助的人。

    function extractVariable(inputScore) {

  inputScore = +localStorage.getItem('highScore'); //we then define inputScore again 
by getting the score stored on local storage

  return inputScore; 

};



function assignValue(inputScore) {  

     document.getElementById("playerScore").value = inputScore;

};



var CrystalRunner = CrystalRunner || {};

CrystalRunner.GameState = {

init: function() {

  },


create: function() {

  },   


update: function() {  

      if(this.player.top >= this.game.world.height && this.counter === 0 || 
 this.player.left <= 0 && this.counter === 0) {
         this.gameOver();
      }


  },     


  gameOver: function(){

          this.updateHighscore();



      var style = {font: '40px Arial', fill: '#fff'};
     this.add.text(this.game.width/2, this.game.height/4, 'GAME OVER', 
style).anchor.setTo(0.5);


      style = {font: '30px Arial', fill: '#fff'};
      this.add.text(this.game.width/2, this.game.height/4 + 50, 'High score: ' + 
this.highScore, style).anchor.setTo(0.5);

      this.add.text(this.game.width/2, this.game.height/4 + 80, 'Your score: ' + 
this.myScore, style).anchor.setTo(0.5);

      style = {font: '18px Arial', fill: '#fff'};
      this.add.text(this.game.width/2, this.game.height/4 + 120, 'Tap/click to play 
again', style).anchor.setTo(0.5);


      this.game.input.onDown.addOnce(this.restart, this);


    }, this);

    gameOverPanel.start();
    this.counter++;

  },


  restart: function(){

    this.game.state.start('Game');
  },

  updateHighscore: function(){
    this.highScore = +localStorage.getItem('highScore');


    if(this.highScore < this.myScore){
            this.highScore = this.myScore;

      localStorage.setItem('highScore', this.highScore);

      this.inputScore= +localStorage.getItem('highScore'); //this input.Score needs 
      //to get it's value from localStorage and not this.highScore


            this.submitScoreButton = this.game.add.sprite(this.game.world.centerX- 
   135, this.game.world.centerY+100, 'submitScoreButton');
            this.submitScoreButton.inputEnabled = true;
            this.submitScoreButton.fixedToCamera = true;

            extractVariable(this.inputScore); //call extractVariable

            this.submitScoreButton.events.onInputDown.add(function() {


                        window.location.href = "index1.php";


                  }, this);

            }

       },


};