Добавить HTML в DOM, не виден селекторам - PullRequest
Новая
       1

Добавить HTML в DOM, не виден селекторам

0 голосов
/ 17 июня 2019

Используя innerHTML, когда я добавляю новый элемент, селектор запросов, кажется, не добавляет его.

Так что, когда я пытаюсь вычислить мои предметы.Я получаю только исходные для расчета, но не новые.

Даже если вы console.log() элементы с переменной, он будет показывать только оригинальные элементы.

Все эти элементы имеют то же имя класса, что и исходный элемент.

Просто невозможно получить их, чтобы их можно было увидеть или добавить к сгенерированным элементам.

Fiddle codeфрагмент . 

const total = document.querySelectorAll(".tot")
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll('.qty-item');
const cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll('.error');
//
let theform = document.querySelector(".theform");
let newitem = document.querySelector('.new-item');
let createBtn = document.getElementById("create");
let theItem = document.querySelector(".newStuff");
//


form.addEventListener("click",function(e){

let theHtml = `
 <div>
      <span class="cost">${newitem.value}</span>
    </div>
    <div class="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      </div>
      <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
`


});

cal.addEventListener('mouseover', function(e) {
  console.log('total', total);
  for (var i = 0; i < price.length; i++) {
    let xPrice = price[i].innerHTML.split("$");
    let parsePrice = parseFloat(xPrice[1]);
    if (textval[i].value === "" || isNaN(textval[i].value)) {

   console.log("No Good");

    } else {
      let x = parseFloat(textval[i].value);
      let y = parsePrice;

      let z = x * y;

      total[i].innerText = z.toFixed(2);


      total[i].innerText = z;

      for (let k = 0; k < total.length; k++) {
        let j = parseFloat(total[k].innerHTML);

        console.log(j);

      }
    }
  }
});
<body>
  <div class="main">
    <span class="title">A Title</span>
  </div>
  <div class="content">
    <div class="item">
      <span>Item 1</span>
    </div>
    <div>
      <span class="cost">$100.00</span>
    </div>
    <div id="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      <p class="error"></p>
    </div>
    <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
  </div>
  <br><br>
  <div class="main">
    <span class="title">A Title</span>
  </div>
  <div class="content">
    <div class="item">
      <span>Item 2</span>
    </div>
    <div>
      <span class="cost">$50.00</span>
    </div>
    <div class="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      <p class="error"></p>
    </div>
    <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
  </div>
  <form class ='theform'>
 <label>NewItem</label><input placeholder="0" class="new-item">
  <button id="create">create</button>
  </form>

  <span class ="newStuff"></span>

  <div class="calc-button">
    <button id="calc">Calculate Prices</button>
  </div>

</body>

Ответы [ 2 ]

1 голос
/ 17 июня 2019

@ Фил прав в этом. Вы запускаете селекторы запросов в начале вашего скрипта и, следовательно, будете запускаться только один раз. Поэтому, когда пользователь нажимает кнопку и вы динамически добавляете новый html-файл на страницу, селекторы запросов не запускаются снова.

Вы можете инициализировать эти запросы в верхней части вашего скрипта так же, как они у вас есть сейчас, но вам нужно будет переназначить их значения новым запросам внутри вашего прослушивателя событий примерно так: 

const total = document.querySelectorAll(".tot")
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll('.qty-item');
let cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll('.error');
//
let theform = document.querySelector(".theform");
let newitem = document.querySelector('.new-item');
let createBtn = document.getElementById("create");
let theItem = document.querySelector(".newStuff");

form.addEventListener("click",function(e){

let theHtml = `
 <div>
      <span class="cost">${newitem.value}</span>
    </div>
    <div class="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      </div>
      <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
`
//append your HTML to the correct target element then update your query inside the event listener

 textval = document.querySelectorAll('.qty-item');
 cal = document.getElementById("calc");
});
0 голосов
/ 17 июня 2019

Поскольку все ваши querySelectorAll() запросы используют простые селекторы с одним именем класса, вы можете заменить их все на document.getElementsByClassName(), то есть 

const total = document.getElementsByClassName('tot')
const price = document.getElementsByClassName('cost');
const textval = document.getElementsByClassName('qty-item');
const errorMessage = document.getElementsByClassName('error');

Это ведет себя почти так же, как querySelectorAll() с одним отличием ...

elements - это live HTMLC коллекция найденных элементов.

Элементы, на которые есть ссылки в этих коллекциях, будут автоматически обновляться при добавлении или удалении элементов из документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...