获取 span 元素的值 [英] Grab the value of a span element

问题描述

我最初提到

我尝试了文章中提到的内容，但我的值变为空白，除非我再次触发该操作.这是我的代码:

让开始输入、目标输入、距离、facId、时间、结果对象；让设施阵列 = [];让距离数组 = [];让时间数组 = [];让 sortArray = [];让 tempArray = [];让 slicedArray = [];让 inputVal = [];//设置标题常量头 = {'QB-Realm-Hostname': 'xxxxxx.quickbase.com','授权':'QB-USER-TOKEN xxxxxxxxxxxxxxxxxxxxxxxx','内容类型':'应用程序/json'}//调用 QB 表并从列 facID 6、地址 8 中提取数据常量体 = {"from": "xxxxxxxx","选择": [6, 8],选项": {跳过":0，顶部":0}}const generateHTML = () =>{//创建xml请求类const xmlHttp = 新的 XMLHttpRequest();xmlHttp.open('POST', 'https://api.quickbase.com/v1/records/query', true);//从标题中提取键for(标题中的const键){//从 headers 对象中获取键和值xmlHttp.setRequestHeader(key, headers[key]);}xmlHttp.onreadystatechange = () =>{如果(xmlHttp.readyState === XMLHttpRequest.DONE){const jsonObject = JSON.parse(xmlHttp.responseText);facId = jsonObject.data.map(e => e["6"].value);const 地址 = jsonObject.data.map(e => e["8"].value);//在html中抓取容器div入口点让容器 = document.querySelector(".container-sm")//根据addresses数组的长度动态创建html元素for (let i = 0; i 
您将看到对象内(在控制台中)array[0] 中设施的值在第一次提交时返回，但距离和时间的前 15 个结果是空的，直到进行第​​二次提交.所以现在我有一个带有 30 个地址的 array[0] 的对象，其中 15 个是重复的，array[1] 有 15 个空距离和 15 个填充距离，然后 array[2] 具有 15 个空驱动时间和 15 个填充驱动时间.如何让每个数组的所有 15 个结果同时返回?我最终想对结果进行排序，以返回 html 中最近的 3 个位置，而不是所有 15 个结果.
解决方案
你的
resultsObject = Object.assign({}, [facilityArray, distanceArray, timeArray]);控制台日志(结果对象)；
实际上在之前触发
xmlHttp.onreadystatechange
即使它位于较低的位置.
这就是第二次出现这些值的原因.您的 Object.assign 基本上分配了空数组，然后您的 onreadystatechange 触发.
您需要将 Object.assign 移动到 onreadystatechange，使用 Promise、async/await 或 fetch API 因为你们支持的浏览器基本相同.
I initially referred to Get value of Span Text because I was trying to grab the text value of a span element:

I tried what was mentioned in the article, but the values I have are coming up blank, unless I trigger the action a second time. Here's my code:


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>




I have the facility, distance and time arrays being populated inside of the facility object, but only the facility data is coming through the first time the form is submitted. I created a resultsObject that I'm passing the values of facilityArray, distanceArray and timeArray. On the first submit, I have all 15 values of addresses because my
quickBaseQuery = () => {
    xmlHttp.send(JSON.stringify(body));
}
function is sending the http request headers so all of that data is coming in as soon as the form is submitted. It seems that this is all being triggered at the same time (facility, time and distance being populated) but it apparently is not. I want to return the header results along with distance and time at the same time, in order to return distance results that are only in a certain range.
Here's my console log:

You'll see that the values of the facility in array[0] inside the object (in the console) are being returned on the first submit, but the first 15 results of distance and time are empty, until the second submit is made. So now I have an object with an array[0] of 30 addresses, 15 which are duplicates, array[1] with 15 empty distances and 15 populated distances, then array[2] with 15 empty drive times and 15 populated drive times. How do I get all 15 results for each array to return at the same time? I ultimately want to sort the results in order to return the 3 closest locations in my html, not all 15 results.
解决方案
Your
resultsObject = Object.assign({}, [facilityArray, distanceArray, timeArray]);
console.log(resultsObject);
actually fires before
xmlHttp.onreadystatechange
Even though its located lower.
That's why the second time you have those values present. Your Object.assign basically assigned empty arrays, and then your onreadystatechange fires.
You need to move your Object.assign into onreadystatechange, use Promise, async / await or fetch API because you support basically the same browsers.

                        
这篇关于获取 span 元素的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！