Ad

Image Margin Not Changing. Possibly Due To My Javascript?

- 1 answer

So my site basically shows the percent of strikes you have "thrown" (baseball). I have set my JavaScript to display a gif if the percent is above 60. However, the image seems to be ignoring the css I have set for the image. Any solutions?

Here is my HTML:

<!DOCTYPE html>
    <title>Javascript Time</title>
<html>
    <head>
        <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="testingJS.css">
        <script src="testingJS.js" type="text/javascript"></script>
    </head>
    <body>

        <h2>Javascript</h2>

        <p id="change"n    <body>

        <h2>Javascript</h2>

        <p id="change">Strike Percent Counter</p>

        <p><input type="button" value="Ball" class="btn" onclick="throwBall()"></p>
        <p><input type="button" value ="Strike" class="btn" onclick="throwStrike()"></p>

        <p>Percent of Strikes:</p>
        <strong><p id="percent"></p></strong> 

        <img id="winner" src="">

    </body>
</html>

My CSS:

p, H2{
    margin-bottom: -25px;
    font-size: 35px;
    color: white;
    text-align: center;
}

#percent{
    position: relative;
    margin: 20px auto auto auto;
    width: 25%;
    font-size: 55px;
    text-emphasis: 5px;
    border: 7px solid gold;
}

.btn{
    font-size: 29px;
    float: center;
}

#winner{
    margin: auto auto auto auto;
}

body{
    background-image: url("http://static.zoonar.com/img/www_repository3/db/3a/39/10_4baf1185c09f28bcbe957e13a0c34fca.jpg");
}

And my JavaScript:

var ball = 0;
var strike = 0;

function throwBall(){
    ball++;
    var percent = strike / (ball + strike);
    var round = percent.toFixed(2) * 100;
    document.getElementById("percent").innerHTML = round + "%";

    if (round <= 60){
        document.getElementById("winner").src = "";
    }
}

function throwStrike(){
    strike++;
    var percent = strike / (ball + strike);
    var round = percent.toFixed(2) * 100;
    document.getElementById("percent").innerHTML = round + "%";
     if (round > 60){
        document.getElementById("winner").src =     "https://media.giphy.com/media/NxA9Wmq8ISblK/giphy.gif";
    }
}

I'm doing this solely out of practicing my skills and have been stuck on this for sometime. Thanks in advance!

Ad

Answer

if you want to display element in the middle, set width property to fit width, display property to block and margin:0 auto;

fiddle : https://jsfiddle.net/7vuzwx8z/

Ad
source: stackoverflow.com
Ad