我按钮中的功能不会重新加载其他功能

Question

I want the "Continue Playing" button to reload the game but keep the score. After I click the button it keeps the score but doesn't give me the correct answer after I click the shape. What am I missing here? Below is my code, you can also view it in jsFiddle to see it in action.

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/

*** Also if you have any tips on shortening the code, I would like to hear. Also I would like to keep this using functions, my next project will be learning about objects.

Answer 1

your problem is in shapeTitle variable .Inside btnContPlay() function you have a new shapeTitle variable because you have started with it with var keyword.Your sqarClick and rectClick functions don't have access to this newly created variable. Remember in javascript functions create their own scope .Your first shapeTitle variable was on global scope .

your btnContPlay() function is:

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

}

change it to

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

    }

So without var keyword ,it will not create a new variable inside function's scope,and now it will effect the global shapeTitle variable.This is a scope related problem.Removing it will solve your problem. jsfiddle