时间戳

首页 > 解决方案 > 将 html innerHTML 传递给 javascript 对象

javascript - 将 html innerHTML 传递给 javascript 对象

问题描述

我正在尝试根据生成的更新 id="messasge-13" 更新我的酒店星级

在 message-13 中，将出现一个值；1、2、3、4 或 5 取决于按钮点击上的酒店

在进行任何查询之前，它将显示 0 颗星

我尝试将脚本内容包装到一个在单击按钮时调用的函数中，但这也不起作用。

下面是核心代码：

<p id="message-13"></p>

<script>
    const ratings = {
      hotel_a : 0
    }
    var hotel_a = parseInt(document.getElementById("message-13").innerHTML,10);
     // total number of stars

    const starTotal = 5;
      for(const rating in ratings) {  
        const starPercentage = (ratings[rating] / starTotal) * 100;
        const starPercentageRounded = `${(Math.round(starPercentage / 10) * 10)}%`;
        document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded; 
      }
</script>

进行查询后，我想将 message-13 中的值传递给键：hotel_a

但是，我无法更新 hotel_a 值

搜索按钮：

    <form>
        <input placeholder="Search here">
           <button>Search</button>
    </form>

然后搜索调用一个 api 来检索 JSON 解析数据，其中包括酒店评级。这是 id=message-13 的形式，它返回值 1 到 5

我有另一个从长 url 获取数据的 javascript：

        const messageThirteen = document.querySelector('#message-13')
        const messageFourteen = document.querySelector('#message-14')


        fetch('http://localhost:3000/search?address='+location+'&checkin='+checkindate+'&checkout='+checkoutdate).then((response) => {


    response.json().then((data) => {
         if (data.error) {
                messageThirteen.textContent = ''
                messageFourteen.textContent = ''
        } else {
                messageThirteen.textContent = data.hotelStar
                messageFourteen.textContent = data.hotelRating

标签： javascripthtml

解决方案

我不知道您是如何获得评分的，但您可以使用下面的方法来获取传递给hotel_a. 如果该值已经传入document.querySelector('#message-13').innerHTML;只需删除rating_paragraph = 5;

const ratings = {
      hotel_a : 0
    }

const button = document.querySelector('#search');
let rating_paragraph = document.querySelector('#message-13').innerHTML;

button.addEventListener('click', function() {
rating_paragraph = 5; //Assign your api call hotel value here as rating_paragragh

ratings.hotel_a = rating_paragraph;
console.log(ratings.hotel_a)
})
<p id="message-13"></p>

<button id="search">Search</button>

推荐阅读