New line JavaScript-CodePudding

<!DOCTYPE html>
<html>
   <head>
      <title> Location Test </title>
      <link rel="shortcut icon" href="#">
   </head>
   <body>
      <h1> Location </h1>
      <label id = "Address"> </label>
      <br>
      <input type="button" value="Log Out" id="LogOut">
  <script>
    const logoutButton = document.getElementById("LogOut");

function getLocation() {
    navigator.geolocation.getCurrentPosition(
        function(Position) {
            var currentdate = new Date();
            document.getElementById("Address").innerHTML = document.getElementById("Address").textContent   "Last Sync: "   currentdate.getDate()   "/"  
                (currentdate.getMonth()   1)   "/"  
                currentdate.getFullYear()   ". "  
                currentdate.getHours()   ":"  
                currentdate.getMinutes()   "."  
                currentdate.getSeconds()   ". ";
            document.getElementById("Address").innerHTML = document.getElementById("Address").textContent   "Latitude: "   Position.coords.latitude;
            document.getElementById("Address").innerHTML = document.getElementById("Address").textContent   " Longitude: "   Position.coords.longitude;
            document.getElementById("Address").innerHTML = document.getElementById("Address").textContent   " Accuracy: "   Position.coords.accuracy;
            document.getElementById("Address").innerHTML = document.getElementById("Address").textContent   " Heading towards direction: "   Position.coords.heading;
            document.getElementById("Address").innerHTML = document.getElementById("Address").textContent   " Speed: "   Position.coords.speed;
            var api_key = '206170168bcf4fdf905d85a34f7b3d79';
            var latitude = Position.coords.latitude;
            var longitude = Position.coords.longitude;
            var api_url = 'https://api.opencagedata.com/geocode/v1/json'
            var request_url = api_url  
                '?'  
                'key='   api_key  
                '&q='   encodeURIComponent(latitude   ','   longitude)  
                '&pretty=1'  
                '&no_annotations=1';
            var request = new XMLHttpRequest();
            request.open('GET', request_url, true);
            request.onload = function() {
                if (request.status === 200) {
                    // Success!
                    var data = JSON.parse(request.responseText);
                    document.getElementById("Address").innerHTML = document.getElementById("Address").textContent   " Address: "   data.results[0].formatted; // print the location

                } else if (request.status <= 500) {
                    // We reached our target server, but it returned an error

                    console.log("unable to geocode! Response code: "   request.status);
                    var data = JSON.parse(request.responseText);
                    console.log('error msg: '   data.status.message);
                } else {
                    console.log("server error");
                }
            };
            request.onerror = function() {
                console.log("unable to connect to server");
            };
            request.send(); // make the request
        },
        function(PositionError) {
            document.getElementById("Latitude").innerHTML = "Could not get latitude";
            document.getElementById("Longitude").innerHTML = "Could not get longitude";
        })
}
getLocation();
setInterval(getLocation, 1000 * 60 * 5)
logoutButton.addEventListener("click", (e) => {
        e.preventDefault();
        window.location.href = "login.html";
    }) 
       </script>
   </body>
</html>

So basically, what I want to do is create a new line at the end of the function. So each time I use setInterval, it creates a new line in the label. But I'm not sure how to. That way, every time it updates the location after 5 minutes, it prints it on a new line. You can ignore the rest of what I say, I'm getting the error that my post is mostly code.

CodePudding user response：

Just write a <br> tag. So change

  " Address: "

to:

  "<br> Address: "

CodePudding user response：

As trincot stated, the inclusion of the line break <br> is the way to go. However, a code change is required because our newly appended line break gets rewritten when we re-call function getLocation().

Appended line breaks will vanish if we reinitialise our innerHTML element with its previous textContent because textContent selects the message from the target and ignores the inner HTML contents.

Thus, the best solution is to formulate the location before its inclusion to the address label.

// Get local date and time.
var currentdate = new Date();
var cd_date = currentdate.toLocaleDateString("en-UK");
var cd_time = currentdate.toLocaleTimeString("en-UK");

// Formulate location string.
var location = `

    Last Sync: ${cd_date} - ${cd_time},
    Latitude: ${Position.coords.latitude},
    Longitude: ${Position.coords.longitude},
    Accuracy: ${Position.coords.accuracy},
    Heading towards direction: ${Position.coords.heading},
    Speed: ${Position.coords.speed},

`.replace(/\s{2}/g, '').trim(); // Remove additional spaces.

...

if (request.status === 200) {
    // Success!
    var data = JSON.parse(request.responseText);
    location  = ` Address: "${data.results[0].formatted}".`;
                        
    // print the location
    var elm_address = document.getElementById("Address");
    elm_address.innerHTML  = (elm_address.innerHTML.trim().length > 0) ? `<br>${location}` : location;    
}

We want to include line breaks when we append additional location to the address label, so I decided to have a conditional statement before appending stage.

elm_address.innerHTML = will append the location after following condition (elm_address.innerHTML.trim().length > 0).

The condition checks if address label is empty.

? `<br>${location}` : location;

When the condition's result is negative, location is appended without a line break. Otherwise, a line break is included.