Изменение DOM из модуля JS

156
13 сентября 2019, 02:10

Пишу приложение на nwjs.

Столкнулся с такой проблемой: есть главный файл main.js - подключен к html-документу. Из этого файла идет вызов функции, которая находится в модуле barScript.js.

В этой функции мне необходимо изменить содержимое тега в html документе

document.getElementById("information").innerHTML = "..."

В консоли появляется "...Cannot read property 'innerHTML' of null at..."

При попытке изменить стили то же самое.

Есть ли возможность влиять на DOM из модуля? В интернете про это ничего не нашел

Воссоздал участок кода в отдельных файлах

index.html

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script type="text/javascript" src='main.js' defer></script> 
</head> 
<body> 
<div id="but" onclick="add()">Нажать</div> 
<div id="par"></div> 
</body> 
</html>

main.js

function add(){ 
  var mod = require('./barScript'); console.log(mod()); 
}

barScript.js

var array_counter = function(){ 
  document.getElementById('par').innerHTML = 'Hello'; 
}; 
module.exports = array_counter;

Та же ошибка

Answer 1

Вы привели текст ошибки

"...Cannot read property 'innerHTML' of null at..."

и код, который, как Вы считаете, к этой ошибке приводит

document.getElementById("information").innerHTML = "...";

Этот код не может вызывать эту ошибку:

document.getElementById("information").innerHTML = "...";

А этот - может:

var a = document.getElementById("information").innerHTML;

Так какой у Вас код?

Answer 2

Проблема решена. Чтобы изменить DOM из модуля необходимо (Для nwjs):

  1. В главном JS файле вызвать функцию модуля и передать в нее элемент DOM, который необходимо изменить.
  2. В модуле сделать все изменения.
  3. Вернуть измененный элемент DOM.

Вот пример (Берем текст, который вводит пользователь и, нажав кнопку, вставляем его в div):

index.html

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <title></title> 
  <script type="text/javascript" src="main.js" defer></script> 
</head> 
 
<body> 
  <input type="button" name="" value="Push"> 
  <input type="text" name="" value=""> 
  <div id="text"></div> 
</body> 
 
</html>

main.js

const module = require('./module'); 
 
var but = document.getElementsByTagName('input')[0], 
    inpText = document.getElementsByTagName('input')[1], 
    blockText = document.getElementById('text'); 
 
but.addEventListener("click", function() { 
  module.showMessage(inpText, blockText) 
});

module.js

module.exports.showMessage = (inpText, blockText) => { 
 
  blockText.innerHTML = inpText.value; 
  return blockText; 
}

READ ALSO
В битрикс не работает $APPLICATION-&gt;ShowHead()
javascript

В битрикс не работает $APPLICATION->ShowHead()

В head прописан $APPLICATION->ShowHead(), но не подключает библиотеки для неавторизованных пользователей, зато для админа - все окВ консоли ошибки:

 137
Вывод видео с карты видео захвата в тег &lt;video&gt; html?
javascript

Вывод видео с карты видео захвата в тег <video> html?

Есть устройство, к нему подключаем карту видео захвата (пока с ней, но в идеале напрямую через vga)Устройство и карта на стороне клиента

 124
Как математически в jquery уменьшить размер шрифта нажатием по кнопке
javascript

Как математически в jquery уменьшить размер шрифта нажатием по кнопке

Всем приветЗадача такая

 113
Прокомментируйте как получаем значение?
javascript

Прокомментируйте как получаем значение?

 165