我需要将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
)插入输入值以一种形式。目前,所有要插入表单的内容是:
我不知道为什么它不起作用。我在下面的两个文件中都包含了代码。任何帮助再次受到赞赏。
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"> </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>
答案 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 id
s 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);
}
},
};