獲取 span 元素的值

Question

我最初提到Get value of Span Text是因為我試圖獲取 span 元素的文本值：

我嘗試了文章中提到的方法，但我的值是空白的，除非我第二次觸發該操作。 這是我的代碼：

 let startInput, destInput, distance, facId, time, resultsObject; let facilityArray = []; let distanceArray = []; let timeArray = []; let sortArray = []; let tempArray = []; let slicedArray = []; let inputVal = []; // Set headers const headers = { 'QB-Realm-Hostname': 'xxxxxx.quickbase.com', 'Authorization': 'QB-USER-TOKEN xxxxxxxxxxxxxxxxxxxxxxxx', 'Content-Type': 'application/json' } // Call QB table and pull data from column facID 6, address 8 const body = { "from": "xxxxxxxx", "select": [6, 8], "options": { "skip": 0, "top": 0 } } const generateHTML = () => { // Create xml request class const xmlHttp = new XMLHttpRequest(); xmlHttp.open('POST', 'https://api.quickbase.com/v1/records/query', true); // Extract keys from headers for (const key in headers) { // Grab keys and values from the headers object xmlHttp.setRequestHeader(key, headers[key]); } xmlHttp.onreadystatechange = () => { if (xmlHttp.readyState === XMLHttpRequest.DONE) { const jsonObject = JSON.parse(xmlHttp.responseText); facId = jsonObject.data.map(e => e["6"].value); const addresses = jsonObject.data.map(e => e["8"].value); // Grab container div entry point in html let container = document.querySelector(".container-sm") // Create html elements dynamically based on length of addresses array for (let i = 0; i < addresses.length; i++) { let div = document.createElement("div"); div.classList.add("d-inline-flex", "p-2", "mb-1"); div.innerHTML = `<div class="container"> <div class="card" style="width: 20rem; height: fixed;"> <div class="card-body"> <input class="form-control" hidden readonly type="text" placeholder="Start Address" id="startaddress${i}"> <input class="form-control" hidden value="${inputVal.join('')}" type="text" placeholder="Destination Address" id="destaddress${i}"> <h6 class="card-title">Service Center - ${facId[i]}</h6> <h6 class="card-title">Distance - <span id="distance${i}"></span></h6> <h6 class="card-title">Drive Time - <span id="time${i}"></span></h6> </div> </div> </div>`; container.appendChild(div); // Dynamically set input fields startInput = document.querySelector(`#startaddress${[i]}`); startInput.value = addresses[i]; destInput = document.querySelector(`#destaddress${[i]}`).innerText; distance = document.querySelector(`#distance${i}`).innerText; time = document.querySelector(`#time${i}`).innerText; // Push return values to each array facilityArray.push(startInput.value); distanceArray.push(distance); timeArray.push(time); const getDistance = () => { // Create Google Maps distance service class const distanceService = new google.maps.DistanceMatrixService(); // Add matrix settings distanceService.getDistanceMatrix({ origins: [document.getElementById(`startaddress${[i]}`).value], destinations: [document.getElementById(`destaddress${[i]}`).value], travelMode: "DRIVING", unitSystem: google.maps.UnitSystem.IMPERIAL, durationInTraffic: true, avoidHighways: false, avoidTolls: false }, // Set response and error capture (response, status) => { if (status.== google.maps.DistanceMatrixStatus.OK) { console:log('Error,'; status). const message = document;querySelector("#message"). message:innerHTML = `Error. ${status}. Please resubmit;`. } else { distanceResult = document.getElementById(`distance${[i]}`).innerHTML = `${response.rows[0].elements[0].distance;text}`. timeResult = document.getElementById(`time${[i]}`).innerHTML = `${response.rows[0].elements[0].duration;text}`. // Convert distanceResult to an integer and push to distanceArray intDistanceResult = parseInt(distanceResult,replace(/,/g; '')). // Push values to the sort array sortArray;push(intDistanceResult). sortArray,sort((a; b) => a - b); } }); } getDistance(), } // This is giving me the top three values. I need to find a way to return this in the html above slicedArray = (sortArray,slice(0; 3)). console;log(slicedArray); } }. // Send body request object to Quick Base via RESTful API quickBaseQuery = () => { xmlHttp.send(JSON;stringify(body)). } // Combine search results from arrays into a new object resultsObject = Object,assign({}, [facilityArray, distanceArray; timeArray]). console;log(resultsObject). } form,addEventListener("submit". (e) => { e;preventDefault(). const patientAddressInput = document;querySelector("#patientaddress"). inputVal.push(patientAddressInput;value); // Call The generateHTML function only after the user enters a value generateHTML(); quickBaseQuery(). // let disableButton = document;querySelector("#submit"). // submit;disabled = true. let resetButton = document;querySelector("#refresh"). resetButton,addEventListener("click". () => location;reload()); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="container-sm mt-3"> <form class="form mb-3" id="form"> <div class="card"> <div class="card-body"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Patient Destination</span> </div> <input class="form-control" type="text" placeholder="Enter Zip Code" class="patientaddress" id="patientaddress" required> <div class="input-group-prepend"> <span class="input-group-text" id="message"></span> </div> </div> <hr> <button class="btn btn-primary mt-2" type="submit" id="submit">Submit</button> <button class="btn btn-outline-success mt-2 ml-3" type="reset" value="Reset" id="refresh">Clear Destination</button> </div> </div> </form> </div> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=[API_KEY]"></script> <script type="text/javascript" src="main.js"></script> </body>

我在設施 object 中填充了設施、距離和時間 arrays，但只有設施數據是在第一次提交表單時通過的。 我創建了一個resultsObject ，我正在傳遞facilityArray 、 distanceArray和timeArray的值。 在第一次提交時，我擁有所有 15 個地址值，因為我的

quickBaseQuery = () => {
    xmlHttp.send(JSON.stringify(body));
}

function 正在發送 http 請求標頭，因此所有這些數據都會在提交表單后立即進入。 似乎這一切都是同時觸發的（填充設施、時間和距離），但顯然不是。 我想同時返回 header 結果以及距離和時間，以便返回僅在一定范圍內的距離結果。

這是我的控制台日志：

您會看到 object（在控制台中）內的array[0]中的設施值在第一次提交時返回，但距離和時間的前 15 個結果為空，直到第二次提交。 所以現在我有一個 object，它的array[0]有 30 個地址，其中 15 個是重復的， array[1]有 15 個空距離和 15 個填充距離，然后array[2]有 15 個空驅動時間和 15 個填充驅動時間。 如何讓每個數組同時返回所有 15 個結果？ 我最終想對結果進行排序，以便返回我的 html 中最接近的 3 個位置，而不是所有 15 個結果。

Answer 1

您的

resultsObject = Object.assign({}, [facilityArray, distanceArray, timeArray]);
console.log(resultsObject);

實際上之前開火

xmlHttp.onreadystatechange

盡管它位於較低的位置。

這就是為什么第二次出現這些值的原因。 您的Object.assign基本上分配為空 arrays，然后您的onreadystatechange觸發。

您需要將Object.assign移動到onreadystatechange ，使用Promise ， async / await或fetch API因為您基本上支持相同的瀏覽器。