Измените тег HTML <p>на JavaScript на Flask переменной нагрузки - PullRequest
Новая
       0

Измените тег HTML <p>на JavaScript на Flask переменной нагрузки

0 голосов
/ 08 января 2020

Я пытаюсь изменить текст в теге p при загрузке, используя JavaScript, используя первый символ этого тега p. Тег p заполняется с использованием синтаксиса двойных фигурных скобок Flask, то есть {{yourstring}}.

Переменная рассчитывается в Python, и возвращается 1 или 0, а затем добавляется в строку в индекс 0. Затем эта строка помещается в HTML как переменную {{trailing_check}}.

Я хочу, чтобы моя функция js изменила значение в этом первом индексе на «галочку» или «крестик» (позже будет изображением) в зависимости от того, является ли значение 1 или 0.

Однако, похоже, ничего не происходит ... см. Мой код ниже.

HTML

<div class="summary" onload="good_outcome()">
   <p id = "trailing_check">{{trailing_check}}</p>
</div>

JS

function good_outcome(){
   if(document.getElementById("trailing_check").innerHTML.charAt(0) == '1'){
     document.getElementById("trailing_check").innerHTML = "tick"
   }
   else{
     document.getElementById("trailing_check").innerHTML = "Cross"
   }

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 08 января 2020

Ваша проблема в том, что элементы div не поддерживают событие onload. Чтобы это исправить, вы должны запустить скрипт после загрузки документа, прослушивая событие DOMContentLoaded документа, чтобы узнать, когда он загружен, или просто переместить загрузку в элемент body.

Если используется Элемент body просто выполните 

<body onload="good_outcome()">
   ...
</body>

И прослушивая событие DOMContentLoaded в JavaScript

<div class="summary">
  <p id = "trailing_check">{{trailing_check}}</p> 
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) { 
   if(document.getElementById("trailing_check").innerHTML.charAt(0) == '1'){
     document.getElementById("trailing_check").innerHTML = "tick"
   }
   else {
     document.getElementById("trailing_check").innerHTML = "Cross"
   }
  });
</script>
0 голосов
/ 08 января 2020

Событие onload может использоваться только для самого document(body), фреймов, изображений и сценариев. Другими словами, он может быть привязан только к телу и / или к каждому внешнему ресурсу. DIV не является внешним ресурсом и загружается как часть тела, поэтому событие onload там не применяется. Проверьте этот ответ для деталей

Вы должны добавить вызов функции к функции «Готовность документа»: чтобы ваш Div не имел нагрузки, как показано ниже: 

<div class="summary" >
   <p id = "trailing_check">{{trailing_check}}</p>
</div>

И JS изменится на good_changes() при загрузке документа: 

`$( document ).ready(function() {
    good_outcome();
}

Если вы не используете Jquery, вы также можете присоединить ту же функцию к событию DOMContentLoaded: 

document.addEventListener('DOMContentLoaded', good_outcome, false);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...