I need to center image searched by JS and nothing works

Asked

Viewed 45 times

0

Next, I’m trying to take a course to help my son in school so I help him and I even train a little JS. It would be several pages with a question and 3 choices If it hits, a commemorative image appears, if it misses a troll image appears. After selecting the answer the buttons turn off. So far so good, the problem is that the image is always positioned to the left and I would like to center so that it is below the question. I will publish on a server inside the domestic network so it can access from the computer, my Iphone or a tablet and regardless of the screen size the image would always be below the question. If it gets good and well complete maybe even upload to help more children with school difficulties... Below is the code I’m using, Gradeco any help

<head>
<style>
#centro {
  display: table;
  margin-left:auto;
  margin-right:auto;
}
</style>
<script>
    function SIM() {
        document.getElementById("NAO").setAttribute("disabled", "disabled");
        document.getElementById("SIM").setAttribute("disabled", "disabled");
        document.getElementById("NAO2").setAttribute("disabled", "disabled");
        var src = "https://media.tenor.com/images/b5b525642d31fc32571618da55f973e5/tenor.gif";
        show_image("https://media.tenor.com/images/b5b525642d31fc32571618da55f973e5/tenor.gif");
        var br = document.createElement("BR");
        var t = document.createTextNode("CERTO");
        var br2 = document.createElement("BR");
        var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
        document.body.appendChild(br);
        document.body.appendChild(t);
        document.body.appendChild(br2);
        document.body.appendChild(t2);
    }
    function NAO() {
        document.getElementById("SIM").setAttribute("disabled", "disabled");
        document.getElementById("NAO").setAttribute("disabled", "disabled");
        document.getElementById("NAO2").setAttribute("disabled", "disabled");
        var src = "http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif";
        show_image("http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif");
        var br = document.createElement("BR");
        var t = document.createTextNode("O CERTO SERIA");
        var br2 = document.createElement("BR");
        var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
        document.body.appendChild(br);
        document.body.appendChild(t);
        document.body.appendChild(br2);
        document.body.appendChild(t2);
    }
    function NAO2() {
        document.getElementById("SIM").setAttribute("disabled", "disabled");
        document.getElementById("NAO").setAttribute("disabled", "disabled");
        document.getElementById("NAO2").setAttribute("disabled", "disabled");
        var src = "http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif";
        show_image("http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif");
        var br = document.createElement("BR");
        var t = document.createTextNode("O CERTO SERIA");
        var br2 = document.createElement("BR");
        var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
        document.body.appendChild(br);
        document.body.appendChild(t);
        document.body.appendChild(br2);
        document.body.appendChild(t2);
    }
    function show_image(src, id,) {
        var img = document.createElement("img");
        img.src = src;
        img.id = document.getElementById("centro");
        document.body.appendChild(img);
    }
</script>
</head>

<body TEXT=#C0C0C0 BGCOLOR=#000000 STYLE="background-color: #000000; color: #C0C0C0;">
<center>
<h1>Vamos Aprender???</h1>
2 X 3 =<br>
<button id="SIM" onclick="SIM();">6</button>
<button id="NAO" onclick="NAO();">8</button>
<button id="NAO2" onclick="NAO();">4</button>
</center>
</body>
</html>

javascript image

1 answer

0


Put this in css

img{
display: block;
margin-left: auto;
margin-right: auto;
}


    function SIM() {
        document.getElementById("NAO").setAttribute("disabled", "disabled");
        document.getElementById("SIM").setAttribute("disabled", "disabled");
        document.getElementById("NAO2").setAttribute("disabled", "disabled");
        var src = "https://media.tenor.com/images/b5b525642d31fc32571618da55f973e5/tenor.gif";
        show_image("https://media.tenor.com/images/b5b525642d31fc32571618da55f973e5/tenor.gif");
        var br = document.createElement("BR");
        var t = document.createTextNode("CERTO");
        var br2 = document.createElement("BR");
        var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
        document.body.appendChild(br);
        document.body.appendChild(t);
        document.body.appendChild(br2);
        document.body.appendChild(t2);
    }
    function NAO() {
        document.getElementById("SIM").setAttribute("disabled", "disabled");
        document.getElementById("NAO").setAttribute("disabled", "disabled");
        document.getElementById("NAO2").setAttribute("disabled", "disabled");
        var src = "http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif";
        show_image("http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif");
        var br = document.createElement("BR");
        var t = document.createTextNode("O CERTO SERIA");
        var br2 = document.createElement("BR");
        var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
        document.body.appendChild(br);
        document.body.appendChild(t);
        document.body.appendChild(br2);
        document.body.appendChild(t2);
    }
    function NAO2() {
        document.getElementById("SIM").setAttribute("disabled", "disabled");
        document.getElementById("NAO").setAttribute("disabled", "disabled");
        document.getElementById("NAO2").setAttribute("disabled", "disabled");
        var src = "http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif";
        show_image("http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif");
        var br = document.createElement("BR");
        var t = document.createTextNode("O CERTO SERIA");
        var br2 = document.createElement("BR");
        var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
        document.body.appendChild(br);
        document.body.appendChild(t);
        document.body.appendChild(br2);
        document.body.appendChild(t2);
    }
    function show_image(src, id,) {
        var img = document.createElement("img");
        img.src = src;
        img.id = document.getElementById("centro");
        document.body.appendChild(img);
    }
#centro {
  display: table;
  margin-left:auto;
  margin-right:auto;
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto }
<body TEXT=#C0C0C0 BGCOLOR=#000000 STYLE="background-color: #000000; color: #C0C0C0;">
<center>
<h1>Vamos Aprender???</h1>
2 X 3 =<br>
<button id="SIM" onclick="SIM();">6</button>
<button id="NAO" onclick="NAO();">8</button>
<button id="NAO2" onclick="NAO();">4</button>
</center>

  • I put and continues always the left, actually I already had but it was as table and not block. I think I’m missing the way to call this css inside JS

  • But in the run is right or not?

  • I think it gave :) needed the center and the img in Style and I was just using center and trying to draw inside the JS, it seems that with the img he applied to all the images used... I can’t thank you enough, I’ve been busting my chops for days

  • Note this https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

  • Answer accepted, Doubt clarified in an easy way, Thank you very much

Browser other questions tagged javascript image

You are not signed in. Login or sign up in order to post.