Форум

IZUM · #1 (**permalink**) 17.10.2022, 19:06

Почему не работают в 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);

voraa · #2 (**permalink**) 17.10.2022, 19:47

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

IZUM · #3 (**permalink**) 17.10.2022, 20:16

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

ksa · #4 (**permalink**) 17.10.2022, 20:59

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

IZUM · #5 (**permalink**) 17.10.2022, 21:11

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

IZUM · #6 (**permalink**) 17.10.2022, 21:26

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

ksa · #7 (**permalink**) 17.10.2022, 22:20

Сообщение от 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>

ksa · #8 (**permalink**) 17.10.2022, 22:22

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

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

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

IZUM · #9 (**permalink**) 17.10.2022, 22:31

Вот, что выводит консоль при введении исходных данных
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]

Alikberov · #10 (**permalink**) 18.10.2022, 06:00

<!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>

Форум

Справочник

Discord чат

Курсы javascript