JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<!DOCTYPE html>
<html>
<body>
<img src ="image1.gif" id="mainImage"></img>
<p id="status"> BEGIN!</p>

<input name type = number id ="price">
<button onclick="buttonClicked()">NEXT</button>
<button onclick="newPlayerClicked()">NEW</button>
<p id="answers"></p>


<script>
var player = 1;
var level = 1;
var answers = new Array(); <!--stores all answers entered-->
    
function buttonClicked(){
    var currentValue = document.getElementById('price').value;<!--gets current price-->
    if (currentValue != "" && currentValue> 0){  <!--type check-->
        document.getElementById("status").innerHTML = "Correct!";
        answers.push(currentValue); <!--adds ans to array-->
        updateDisplay(); <!--calls update display-->
        level++; <!--sets next level-->
    }else{
        document.getElementById("status").innerHTML = "WRONG! Try again"; <!--if data type incorrect do nothing and propmt-->
    }

}

function updateDisplay(){
    var allAnswersString = [];
    for(i = 0; i < answers.length; i++) {
        allAnswersString += (answers[i]+ " ");
    }<!--create fresh string of answers-->
    document.getElementById("answers").innerHTML = allAnswersString;
    currentImage =  "image" + level + "gif";
        document.mainImage.src = currentImage;
}
    
function newPlayerClicked(){
    player++;
    level = 1;
    <!--to implement, create fresh string of answers in 3d array? using players var to track position-->
}
</script>
</body>
</html>