Refresh text in div with JavaScript

StackOverflow https://stackoverflow.com/questions/22446163

  •  15-06-2023
  •  | 
  •  

Question

Hello everybody i am trying to refresh a div in javascript every 1 second i have got one of the variables to refresh but cannot seem to get the second one to refresh.

I am looking to refresh the text with the id of refresh1 either correct or incorrect

many thanks in advance.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Binary Learning Tool!</title>
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
</head>
<body>
<script type='text/javascript'>
var total=1;
var answer;
var randnum=(Math.floor(Math.random() * 2 + 1))
document.write(randnum);
</script>
</br></br></br></br>
</br>
<img
id="num1" onclick="swapImage1( 'num1','/img/1.png','/img/0.png');" src="/img/0.png" alt="num1" value="32"
/>
<img
id="num2" onclick="swapImage2( 'num2','/img/1.png','/img/0.png');" src="/img/0.png" alt="num2" value="16"
/>
<img
id="num3" onclick="swapImage3( 'num3','/img/1.png','/img/0.png');" src="/img/0.png" alt="num3" value="8"
/>
<img
id="num4" onclick="swapImage4( 'num4','/img/1.png','/img/0.png');" src="/img/0.png" alt="num4" value="4"
/>
<img
id="num5" onclick="swapImage5( 'num5','/img/1.png','/img/0.png');" src="/img/0.png" alt="num5" value="2"
/>
<img
id="num6" onclick="swapImage6( 'num6','/img/1.png','/img/0.png');" src="/img/1.png" alt="num6" value="1"
/>
</body>
<script type="text/javascript" src="var.js"></script>
</html>
</br></br>
<head>
<script langauge="javascript">
            window.setInterval("refreshDiv()", 1);
            function refreshDiv(){
                document.getElementById("refresh").innerHTML = + total;
            }
</script>
<script langauge="javascript">
            window.setInterval("refreshDiv()", 1);
            function refreshDiv(){
                document.getElementById("refresh1").innerHTML;
            }
</script>
</head>
<div id="refresh">
    <script type="text/javascript">
        document.write(total);
    </script>
        </div></br>
        <div id="refresh1">
        <script type="text/javascript">

        if (total === randnum)
    {
        answer=("Correct");
        document.write(answer);
    }

    else

    {
        answer=("Incorrect");
        document.write(answer);

    }
 </script></div></br></br>
 <input type="button" value="Restart" onClick="history.go(0)">
Était-ce utile?

La solution

So, I don't really get, what you want to do, but I tried to realize what you want to do:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Binary Learning Tool!</title>
        <meta charset="utf-8">
        <meta name="description" content="Change image on click with jQuery">
        <meta name="keywords" content="Change image on click with jQuery">
        <meta name="author" content="">
        <link rel="stylesheet" href="style.css" media="all" type="text/css">
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
        <script type="text/javascript">
            // Define your Variables
            var total = 1;
            var answer = '';
            var randnum = (Math.floor(Math.random() * 2 + 1));

            // This function decides whether 'correct' or 'incorrect' should be displayed
            function decide_refresh1(tot,rand) {
                if(tot == rand) {
                    return 'correct';
                }
                return 'incorrect';
            }

            // This function is called when you click on one of your images, and just calls the decide_refresh1() function and writes the result to the div refresh1.
            function reload_refresh1(triggering_object) {
                $('#refresh1').html(decide_refresh1(total,randnum));
            }

            // Code's executed after Website has finsihed loading
            $(document).ready(function () {
                // Save your divs to variables, makes easier accessable
                var div_randum = $('#div_randum');
                var div_refresh = $('#refresh');
                var div_refresh1 = $('#refresh1');

                // Write randnum to div_randnum and total to refresh
                div_randum.html('Randnum: '+randnum);
                div_refresh.html('Total: '+total);

                // Fill refresh1 with correct or incorrect
                div_refresh1.html(decide_refresh1(total,randnum));
            });
        </script>
    </head>
    <body>
        </br>
        </br>
        </br>
        <div id="div_randum"></div>
        </br>
        <img id="num1" onclick="reload_refresh1(this);" src="/img/0.png" alt="num1" value="32"/>
        <img id="num2" onclick="reload_refresh1(this);" src="/img/0.png" alt="num2" value="16" />
        <img id="num3" onclick="reload_refresh1(this);" src="/img/0.png" alt="num3" value="8" />
        <img id="num4" onclick="reload_refresh1(this);" src="/img/0.png" alt="num4" value="4" />
        <img id="num5" onclick="reload_refresh1(this);" src="/img/0.png" alt="num5" value="2" />
        <img id="num6" onclick="reload_refresh1(this);" src="/img/1.png" alt="num6" value="1" />
        </br>
        </br>
        <div id="refresh"></div>
        </br>
        <div id="refresh1"></div>
        </br>
        </br>
        <input type="button" value="Restart" onClick="history.go(0)">
    </body>
</html>

I know it is not exactly what you want, but maybe it's a good start. If you have problems, just ask ;-) Btw: Your source is hell of a mess. Btw2: Removed your "swap_image();" function for simplicity

Autres conseils

Looks like there is an error in your refreshDiv() calls.

Your code:

s<script langauge="javascript">
        window.setInterval("refreshDiv()", 1);
        function refreshDiv(){
            document.getElementById("refresh").innerHTML = + total;
        }
</script>
<script langauge="javascript">
        window.setInterval("refreshDiv()", 1);
        function refreshDiv(){
            document.getElementById("refresh1").innerHTML;
        }

I suggest not having 2 functions named refreshDiv(). Also, the second RefreshDiv does not have any code to update! The first refreshDiv() has 

document.getElementById("refresh").innerHTML = + total

The second one does not.

HTH!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top