我按钮中的功能不会重新加载另一个功能

Question

我想要 "Continue Playing" 按钮重新加载游戏但保持得分。单击按钮后，它会保留分数，但单击形状后不会给我正确答案。我在这里错过了什么？下面是我的代码，您也可以在 jsFiddle 中查看它以查看它的运行情况。

var shapeName = ["Square", "Rectangle"];
var score = 0;

var cssIdSquare = "<div id='square' onclick='sqrClick()'></div>";
var cssIdRec = "<div id='rect'onclick='rectClick()' ></div>";

var docMyAnswer = document.getElementById("myAnswer");
var docMyScore = document.getElementById("score");

var answerCorrect = "CORRECT!";
var answerWrong = "WRONG!";

// Random Shape to Select Title

var shapesTitle = shapeName[Math.floor(Math.random() * shapeName.length)];
document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();

///// Function Shape Logic

function showAllShapes() {

    ///// Show both shapes
    document.getElementById("showShapes").innerHTML = cssIdSquare + "<br>" + cssIdRec;
}

function sqrClick() {
    if (shapesTitle === "Square") {
        docMyAnswer.innerHTML = answerCorrect;
        score += 1;
        docMyScore.innerHTML = score;
    }
    if (shapesTitle === "Rectangle") {
        docMyAnswer.innerHTML = answerWrong;
    }
}

function rectClick() {
    if (shapesTitle === "Rectangle") {
        docMyAnswer.innerHTML = answerCorrect;
        score += 1;
        docMyScore.innerHTML = score;
    }
    if (shapesTitle === "Square") {
        docMyAnswer = answerWrong;
    }
}

showAllShapes();


// Continue Playing Button
function btnContPlay() {
var shapesTitle = shapeName[Math.floor(Math.random() * shapeName.length)];
document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();
showAllShapes();

}



// Start Over Button
function btnStartOver() {
    score = 0; // reset score to 0
    document.getElementById("score").innerHTML = score;
    location.reload();
}

http://jsfiddle.net/arevee/39rgqevy/

*** 另外，如果您有任何关于缩短代码的提示，我很想听听。另外我想保留这个使用函数，我的下一个项目将学习对象。

Answer 1

你的问题在 shapeTitle variable。在 btnContPlay() 函数中你有一个新的 shapeTitle 变量，因为你已经从 var keyword.Your sqarClick 和 rectClick 函数无法访问这个新创建的变量。请记住在 javascript 函数中创建它们自己的范围。您的第一个 shapeTitle 变量在 全局范围 。

您的 btnContPlay() 函数是：

function btnContPlay() {
var shapesTitle = shapeName[Math.floor(Math.random() * shapeName.length)];
document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();
showAllShapes();

}

改为

   function btnContPlay() {
     shapesTitle = shapeName[Math.floor(Math.random() *shapeName.length)]; //removed var from shapesTitle
    document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();
    showAllShapes();

    }

所以没有 var 关键字，它不会在函数范围内创建一个新变量，现在它会影响全局 [=14=] variable.This 是一个 scope related problem.Removing it will solve your problem. jsfiddle

我按钮中的功能不会重新加载另一个功能

Function in my button wont reload another function

javascript

function