show span in html with a javascript function with onclick involving random generator

Question

I apologize if the title sounds a little confusing, essentially, I am trying to figure out how to get a span to appear and/or swap depending on a random generator. in one of my classes involving riddles, I was able to get the text to disappear and reappear upon clicking the question. (see example below)

 var isVisible = new Array(); isVisible[0] = false; isVisible[1] = false; function revealAnswer(answerId, answer, indexNum){ if(isVisible[indexNum]==false){ var spanAnswer = document.querySelectorAll(".answers"); for(i=0;i < spanAnswer.length ; i++){ spanAnswer[i].innerHTML = ''; } document.getElementById(answerId).innerHTML = answer; isVisible[indexNum]=true; console.log(answerId); } else{ document.getElementById(answerId).innerHTML = ""; isVisible[indexNum]=false; } } 

  <h5>Question 1</h5> <p onClick="revealAnswer('answer1','When it is turned into the teacher', 0)">When is homework not homework?</p><br/> <span id="answer1" class="answers"></span><br/> 

I am trying to figure out the best way to apply that a random "hit or miss" generator to some button clicks that I have set up in another page (see below) I want the text to appear in the center of my "content div" which I can take care of in CSS.

 // javascript file for gun tutorial// window.onload=function() { var extraAmmo = 210; var maxAmmo = 30; var currentAmmo = maxAmmo; var extraAmmoHud = document.getElementById("extra-ammo"); var currentAmmoHud = document.getElementById("current-ammo"); var shootButton = document.getElementById("shoot-button"); var unloadButton = document.getElementById("unload-button"); var reloadButton = document.getElementById("reload-button"); var gunShot = new Audio('GunShot.mp3') var gunShotAuto = new Audio('GunShotFullAuto.mp3') var gunReload = new Audio ('GunCockingFast.wav') refreshScreen(); shootButton.onclick=function() { if(currentAmmo > 0) { currentAmmo--; gunShot.play(); refreshScreen(); } } unloadButton.onclick=function() { if (currentAmmo > 0) { unloadTimer = setTimeout(unloadButton.onclick, 65) currentAmmo--; gunShotAuto.play() refreshScreen(); } else unloadTimer = null; } reloadButton.onclick=function() { var difference = getDifference(); if(extraAmmo >= difference) { currentAmmo += difference; extraAmmo -= difference; gunReload.play() } else { currentAmmo += extraAmmo; extraAmmo -= extraAmmo; } refreshScreen(); function getDifference() { return maxAmmo -currentAmmo; } } function refreshScreen() { extraAmmoHud.innerHTML="Extra Ammo: " + extraAmmo; currentAmmoHud.innerHTML="Current Ammo: " + currentAmmo; } } 

 form { height:110px; width:940px; margin:0px; } #content { width:940px; height:940px; background-image:url(../images/bg.jpg); background-repeat:no-repeat; } #shoot-button { width:115px; height:20px; margin-top:10px; background-color:green; color:white; font-weight:bold; text-align:center; line-height:5px; border-radius:5px; border:1px solid #006400; cursor:pointer; } #unload-button { width:115px; height:20px; margin-top:15px; background-color:yellow; color:black; font-weight:bold; text-align:center; line-height:5px; border-radius:5px; border:1px solid #D4AF37; cursor:pointer; } #reload-button { width:115px; height:20px; margin-top:15px; background-color:red; color:white; font-weight:bold; text-align:center; line-height:5px; border-radius:5px; border:1px solid #DC143C; cursor:pointer; } #boxobuttons { float:left; height:110px; width:120px; padding:0px 10px; } #ammo-count { float:right; height:110px; width:240px; line-height:25px; text-align:center; color:red; font-weight:bolder; font-size:20px; } .accuracy { color:#FF0000; font-weight:bold; font-size:30px; text-align:center; display:block; margin: auto; -webkit-text-stroke: 2px #DD0000; } 

  <div id="content"> <span id="Hit" class="accuracy"></span> <span id="Miss" class="accuracy"></span> </div> <form> <div id="boxobuttons"> <input type="button" value="Shoot" id="shoot-button" /> <input type="button" value="Unload" id="unload-button" /> <input type="button" value="Reload" id="reload-button" /> </div> <div id="ammo-count"> <p id="current-ammo"></p> <p id="extra-ammo"></p> </div> </form> 

I am still unfamiliar with a lot of the Javascript codes and commands, but any help I can get is greatly appreciated.

Answer 1

Well since it's a random game, we'll need a random function somewhere. It's only hit or miss so generating 0 or 1 randomly will do just fine:

var rnd = Math.floor(Math.random() * 2);

rnd will be either 0 or 1, assume 0 is hit and 1 a miss or the other way around.

Now we have two spans which we want to show in the center based on the generated random. So we can have their parent ( <div id="content"> ) to have position: relative; . Now the spans both have display: none; at the beginning and are absolutely positioned. Whether it's a hit or miss we'll show one and hide the other.

jsfiddle DEMO

CSS:

#content {
    position: relative;
    /* other styles */
}
.accuracy {
    position: absolute;
    display: none;
    left: 45%; /* change so you're happy with the position */
    top: 45%;
    /* other styles */
}

Javascript:

var shootButton = document.getElementById("shoot-button");
var hitSpan = document.getElementById('Hit');
var misSpan = document.getElementById('Miss');
var numShot = document.getElementById('numShot');
var numHit = document.getElementById('numHit');
var numMiss = document.getElementById('numMiss');
var shots = 0;
var miss = 0;
var hit = 0;

shootButton.onclick = function () {
    var rnd = Math.floor(Math.random() * 2);
    refreshScreen(rnd);
}

function refreshScreen(n) {
    shots++;
    numShot.innerHTML = shots;
    if(n) {
        hit++;
        hitSpan.style.display = "block";
        misSpan.style.display = "none";
        numHit.innerHTML = hit;
    }
    else {
        miss++;
        misSpan.style.display = "block";
        hitSpan.style.display = "none";
        numMiss.innerHTML = miss;
    }
}