Javascript-форум - Почему не работают в JS файле исходные данные, введённые с veb страницы?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Почему не работают в JS файле исходные данные, введённые с veb страницы? (https://javascript.ru/forum/misc/84572-pochemu-ne-rabotayut-v-js-fajjle-iskhodnye-dannye-vvedjonnye-s-veb-stranicy.html)

Почему не работают в JS файле исходные данные, введённые с veb страницы?

Почему не работают в JS файле исходные данные, введённые с veb страницы ?

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="./test.js" defer></script>
   <title>Example 2</title>
</head>
<body>
   <div class="container">
      <div class="row row-x">
        <span>Введите значение Х</span>
        <input id="x" type="text">
      </div>
      <div class="row row-y">
        <span>Введите значение Y</span>
        <input id="y" type="text">
      </div>
      <div class="row row-z">
        <span>Введите значение Z</span>
        <input id="z" type="text">
      </div>
      <div class="row row-arr-1">
        <input id="inp-arr-1" type="text" placeholder="Значения массива через запятую, без пробелов">
      </div>
      <div class="row row-arr-2">
        <input id="inp-arr-2" type="text" placeholder="Значения массива через запятую, без пробелов">
      </div>
      <div class="row">
        <button id="save">Сохранить</button>
      </div>
   </div>
</body>
</html>

const inpX = document.getElementById('x');
const inpY = document.getElementById('y')
const inpZ = document.getElementById('z')
const inpArr1 = document.getElementById('inp-arr-1')
const inpArr2 = document.getElementById('inp-arr-2')
const inputs = document.querySelectorAll('input')

const btnSave = document.getElementById('save')
let tp = null; let xmax = null; let xopn = null; let op0 = null; let sh0 = null;
function createData() {
    const data = {
        tp: +inpX.value,
        xmax: +inpY.value,
        xopn: +inpZ.value,
        op0: inpArr1.value.split(",").map(Number),
        sh0: inpArr2.value.split(",").map(Number)
    }
    console.log(data);
    return data
}
function initValues() {
    const data = createData()
    let tp = data.tp
    let xmax = data.xmax
    let xopn = data.xopn
    let op0 = data.op0
    let sh0 = data.sh0

    console.log(tp);
    console.log(xmax);
    console.log(xopn);
    console.log(op0);
    console.log(sh0);
}
btnSave.addEventListener('click', () => {
    initValues()
})
console.log(tp * 2);

А почему это должно работать?
Откуда браузер знает, что там должен быть код javascript?

C 29 по 33 строку, которые, уже находяться в JS происходит вывод заданных значений. Можно пояснить, как браузер узнаёт, что там должен быть код javascript

IZUM, ты можешь сделать полноценный тестовый пример, который можно запустить прямо тут?
Те два куска (хтмл и js) никак не могут работать вместе.

В HTML есть связь <script src="./test.js" defer></script> Эти куски работают вместе, а как это продемонстрировать, даже, не представляю.

Я уверяю Вас, что с 29 по 33 строку, которые, уже находяться в JS происходит вывод заданных значений, за пределами function initValues() заданные значения с веб страницы не проявляются.

Цитата:

Сообщение от IZUM

В HTML есть связь <script src="./test.js" defer></script> Эти куски работают вместе

Если так - на момент работы скрипте никаких элементов на странице нет.

Цитата:

Сообщение от IZUM

как это продемонстрировать, даже, не представляю

Вместе их и нужно показывать.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
const inpX = document.getElementById('x');
console.log(inpX)
const inpY = document.getElementById('y')
console.log(inpY)
const inpZ = document.getElementById('z')
console.log(inpZ)
const inpArr1 = document.getElementById('inp-arr-1')
console.log(inpArr1)
const inpArr2 = document.getElementById('inp-arr-2')
console.log(inpArr2)
const inputs = document.querySelectorAll('input')
console.log(inputs)

const btnSave = document.getElementById('save')
console.log(btnSave)

let tp = null; let xmax = null; let xopn = null; let op0 = null; let sh0 = null;
function createData() {
    const data = {
        tp: +inpX.value,
        xmax: +inpY.value,
        xopn: +inpZ.value,
        op0: inpArr1.value.split(",").map(Number),
        sh0: inpArr2.value.split(",").map(Number)
    }
    console.log(data);
    return data
}
function initValues() {
    const data = createData()
    let tp = data.tp
    let xmax = data.xmax
    let xopn = data.xopn
    let op0 = data.op0
    let sh0 = data.sh0

    console.log(tp);
    console.log(xmax);
    console.log(xopn);
    console.log(op0);
    console.log(sh0);
}
btnSave.addEventListener('click', () => {
    initValues()
})
console.log(tp * 2);

</script>
   <title>Example 2</title>
</head>
<body>
   <div class="container">
      <div class="row row-x">
        <span>Введите значение Х</span>
        <input id="x" type="text">
      </div>
      <div class="row row-y">
        <span>Введите значение Y</span>
        <input id="y" type="text">
      </div>
      <div class="row row-z">
        <span>Введите значение Z</span>
        <input id="z" type="text">
      </div>
      <div class="row row-arr-1">
        <input id="inp-arr-1" type="text" placeholder="Значения массива через запятую, без пробелов">
      </div>
      <div class="row row-arr-2">
        <input id="inp-arr-2" type="text" placeholder="Значения массива через запятую, без пробелов">
      </div>
      <div class="row">
        <button id="save">Сохранить</button>
      </div>
   </div>
</body>
</html>

IZUM, у тебя еще и ошибка при выполнении

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Ты тестить програмку вообще не умеешь?
Посмотри что выводят мои "консольки"... Вот с этим ты и работаешь.

Вот, что выводит консоль при введении исходных данных
0 - это то, что выводит console.log(tp * 2)
test.js:18 {tp: 34, xmax: 29, xopn: 45, op0: Array(4), sh0: Array(3)}
test.js:29 34
test.js:30 29
test.js:31 45
test.js:32 (4) [67, 56, 34, 89]
test.js:33 (3) [35, 63, 80]

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
let tp = null; let xmax = null; let xopn = null; let op0 = null; let sh0 = null;

function createData() {
    const data = {
        tp: +inpX.value,
        xmax: +inpY.value,
        xopn: +inpZ.value,
        op0: inpArr1.value.split(",").map(Number),
        sh0: inpArr2.value.split(",").map(Number)
    }
    console.log(data);
    return data
}

function initValues() {
    const data = createData()
    let tp = data.tp
    let xmax = data.xmax
    let xopn = data.xopn
    let op0 = data.op0
    let sh0 = data.sh0

    console.log(tp);
    console.log(xmax);
    console.log(xopn);
    console.log(op0);
    console.log(sh0);
}
</script>
   <title>Example 2</title>
</head>
<body>
   <div class="container">
      <div class="row row-x">
        <span>Введите значение Х</span>
        <input id="x" type="text">
      </div>
      <div class="row row-y">
        <span>Введите значение Y</span>
        <input id="y" type="text">
      </div>
      <div class="row row-z">
        <span>Введите значение Z</span>
        <input id="z" type="text">
      </div>
      <div class="row row-arr-1">
        <input id="inp-arr-1" type="text" placeholder="Значения массива через запятую, без пробелов">
      </div>
      <div class="row row-arr-2">
        <input id="inp-arr-2" type="text" placeholder="Значения массива через запятую, без пробелов">
      </div>
      <div class="row">
        <button id="save">Сохранить</button>
      </div>
   </div>
<script>
const inpX = document.getElementById('x');
console.log(inpX)
const inpY = document.getElementById('y')
console.log(inpY)
const inpZ = document.getElementById('z')
console.log(inpZ)
const inpArr1 = document.getElementById('inp-arr-1')
console.log(inpArr1)
const inpArr2 = document.getElementById('inp-arr-2')
console.log(inpArr2)
const inputs = document.querySelectorAll('input')
console.log(inputs)

const btnSave = document.getElementById('save')
console.log(btnSave)

btnSave.addEventListener('click', () => {
    initValues()
})

console.log(tp * 2);
</script>
</body>
</html>