JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<!DOCTYPE html>
<html>
<body>
<p id="player">Player: 1</p>
<p id="level">Level: 1</p>
<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-->
answers[0] = new Array();
function buttonClicked(){
    var currentValue = document.getElementById('price').value;<!--gets current price-->
    if (currentValue != "" && currentValue> 0){  <!--type check-->
        document.getElementById("status").innerHTML = "Correct!";
        answers[player-1].push(currentValue); <!--adds ans to array-->
        level++; <!--sets next level-->
        updateDisplay(); <!--calls update display-->
        
    }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[player - 1].length; i++) {
        allAnswersString += (answers[player - 1][i]+ " ");
    }<!--create fresh string of answers-->
    document.getElementById("answers").innerHTML = allAnswersString;
    currentImage =  "image" + level + "gif";
        document.mainImage.src = currentImage;
    document.getElementById("player").innerHTML = "Player: "+player;
    document.getElementById("level").innerHTML = "Level: "+ level;
}
    
function newPlayerClicked(){
    player++;
    answers[player-1] = new Array();
    level = 1;
    <!--to implement, create fresh string of answers in 3d array? using players var to track position-->
    updateDisplay();
}
</script>
</body>
</html>