Thiết kế website giá rẻ

Question

The div is broken, the <p>‘s are written outside of it.
I suspect it’s a response time problem, but I’m not able to fix it.
If I remove the jquery button effect and div all together, I’m able to have the location displayed just fine.

Go easy, I’m new at Javascript..

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" media="screen" href="geo.css" />
    <title>Geolocation</title> 
    
    <script>// JQuery
        $(document).ready(function(){
            var banner = $("#banner-message");
            var button = $("button");

            // handle click and add class
            button.on("click", () => {
              banner.toggleClass("alt");
            });
        });
    </script>


  

</head> 
  
<body> 


  <script> 
            
    // Beregn afstand mellem 2 punkter
    function distance(lon1, lat1, lon2, lat2) {
      var R = 6371; // Radius of the earth in km
      var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
      var dLon = (lon2-lon1).toRad(); 
      var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
              Math.sin(dLon/2) * Math.sin(dLon/2); 
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
      var d = R * c; // Distance in km
      return d;
    }

    /** Converts numeric degrees to radians */
    if (typeof(Number.prototype.toRad) === "undefined") {
      Number.prototype.toRad = function() {
        return this * Math.PI / 180;
      }
    }

    window.navigator.geolocation.getCurrentPosition(function(pos) {
      console.log(pos); 
      console.log(
        distance(pos.coords.longitude, pos.coords.latitude, 9.318893232332728, 56.53058705206541)
      ); 
    });

    // Check if the browser supports geolocation 
    if ("geolocation" in navigator) { 
  
        // Get the user's current position 
        navigator.geolocation.getCurrentPosition( 
            function (position) { 
                let latitude = position.coords.latitude; 
                let longitude = position.coords.longitude;
                let accuracy = position.coords.accuracy;  
            
                
                document.body.innerHTML += "<div id="banner-message">"; 
                document.body.innerHTML += "<p>Geolocation test</p>"; 
                
            
                document.body.innerHTML +=  
                   "<p>Latitude: " + latitude + "</p>"; 
                document.body.innerHTML += 
                   "<p>Longitude: " + longitude + "</p>";
                document.body.innerHTML += 
                   "<p>Accuracy indenfor: " + accuracy + " meter</p>";


                const Afstand = distance(longitude, latitude, 9.418893232332728, 56.93058705206541);

                document.body.innerHTML += 
                   "<p>Afstand: " + Math.round(Afstand*1000) + " meter</p>";


                document.body.innerHTML += "<button>Change coloring</button>";
                document.body.innerHTML += "</div>"; 


        //SLEEP er her fordi der ikke er en WAIT funktion i Javascript !
        function sleep(ms) {
          return new Promise(resolve => setTimeout(resolve, ms));
        }
        //Check om accuracy er under 200 meter - ellers refresh siden efter 7 sekunder.
            /*
            if (Math.round(Afstand*1000) > 200) {
                sleep(7000).then(() => {
                location.reload();
            }); 
            }
            */
        },
                
        function (error) { 
            console.error("Error getting location: " + error.message); 
        } 
        ); 
        } else { 
            alert("Geolocation is not supported by your browser"); 
        } 
    </script>  
</body> 
</html>

geo.css

body {
  background: #FFE0AF;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #F7F7F0;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #BAF1BE;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #FFBFBF;
  color: #000;
}

I’d prefer to have the script in the header, but I any solution is welcome..

Thiết kế website giá rẻ

Danh mục

Displaying geolocation jumps out of div