Как передать введенное пользователем число в функцию в отдельном файле js

@Kearry · Регистрация: 02.11.2018

Студворк — интернет-сервис помощи студентам

Доброго времени суток)
Необходимо вычислить факториал числа на js
создаем 2 файла: html страничку с условием задачи, элементом text и кнопкой Вычислить, второй файл .js содержит функции на языке js.
Число вводит пользователь в окошко text, далее нажимает кнопку, и ниже выводится результат.
Что я не могу осуществить: передать данные их text в файл js, чтобы выполнить вычисления, вывести результат в исходное окно (желательно содержимо всего окна не обновлять, тут, я предполагаю, можно использовать div, но КАК это сделать, я не знаю)
важно использовать именно 2 файла без всяких promt и alert.

примерный код html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
<title> </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<H2> Задача 1 <br> </H2>
<font name="factorial">
Поиск произведения чисел от 1 до N (факториала числа N)<br>
 
Введите число N:   <input type="text" name="chisloFact" size="50">  <br>
<input type="submit" value="Вычислить" onClick="funFactorial()"> <br>
Результат:
<HR>
 
</font>
</body>

код на js (необходимо пока без рекурсии и проверки правильности ввода)

JavaScript
1
2
3
4
5
6
7
8
function funFactorial (chisloFact) {
    var result = 1;
    for(i = 1; i <= chisloFact ; ++i) {
    result *= i;
        }
  return result;
  
}

PS. объясните, пожалуйста, на простом понятном чайнику языке. изучать только начинаю.

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

@amr-now · 02.11.2018, 12:40

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="./script.js"></script>
</head>
<body>
    <H2> Задача 1 <br> </H2>
    Поиск произведения чисел от 1 до N (факториала числа N)<br>
 
    Введите число N: <input type="text" id="chisloFact" size="50"> <br>
    <input type="button" id="buttonCalc" value="Вычислить"> <br>
    Результат:
    <HR>
    <div id="result"></div>
    <script>
        document.getElementById("buttonCalc").onclick = handler;
 
        function handler() {
            document.getElementById("result").textContent =
                funFactorial(document.getElementById("chisloFact").value);
        }
    </script>
</body>
</html>

Старайтесь в HTML-теги не вписывать JavaScript-код.
В старых учебниках заставляют, а сейчас лучше избавляться от такой привычки.
----
Здесь в начале HTML-файла подцепляется объявление математической функции,
Потом в <body> строится DOM-дерево.
В самом конце элемент <script> объявляет и назначает обработчики, когда DOM-дерево уже построено.

@Kearry · 02.11.2018, 17:30 **[ТС]**

amr-now
спасибо. попробую. мне-то как раз и надо реализовать, не вставляя скрипт в html теги. скрипт будет в отдельном файле с расширением js

@Evgen1337 · 02.11.2018, 18:17

script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// подождем пока загрузится страница
document.addEventListener('DOMContentLoaded', function () {
  // ф-ция подсчета факториала
  function funFactorial(chisloFact) {
    var result = 1;
    for (i = 1; i <= chisloFact; ++i) {
      result *= i;
    }
    return result;
  }
 
  // установим на кнопку слушатель, который будет по click, выполнять ф-цию
  document.getElementById('calc').addEventListener('click', function () {
    // выведем результат вызова ф-цию со значением введеным поле
    document.getElementById('result').innerText = funFactorial(document.getElementById('chisloFact').value)
  })
})

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
  <title> </title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js"></script>
</head>
 
<body>
  <H2> Задача 1 <br> </H2>
  Поиск произведения чисел от 1 до N (факториала числа N)<br>
  Введите число N: <input type="text" id="chisloFact" size="50"> <br>
  <input id="calc" type="button" value="Вычислить"> <br>
  Результат: <span id="result"></span>
  <HR>
</body>

@amr-now · 02.11.2018, 18:35

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

не вставляя скрипт в html теги.

Я об этом:

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

onClick="funFactorial()">

Так лучше не делать.

@Kearry · 02.11.2018, 19:13 **[ТС]**

amr-now,
понятно. но пока оставлю так, как работает. спасибо

Добавлено через 2 минуты
спасибо за помощь.
реализовал так: (поскольку пока мне только так понятно, что и где происходит)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<head>
<title> </title>
<meta charset="utf-8">
 
<script src="script.js"></script>
</head>
<body>
 
<H2> Задача 1 <br> </H2>
<font>
Поиск произведения чисел от 1 до N (факториала числа N)<br>
Введите число N:   <input type="text" id="numFact" size="50">  <br>
<input type="submit" value="Вычислить" onClick="funFactorial()"> <br>
<H2> Результат: <div id="resultFact" name="resultFact">  </div> </H2>
<HR>
</font>
</body>

JavaScript
1
2
3
4
5
6
7
8
function funFactorial () {
    var resultFact = 1;
    var n = (document.getElementById('numFact').value);
    for(i = 1; i <= n; ++i) {
    resultFact *= i;
        }
document.getElementById('resultFact').innerHTML = resultFact;
}

@Evgen1337 · 02.11.2018, 19:30

кто такой font и зачем он нужен
почему input type="submit"

такие вопрос задаст учитель )

@amr-now · 02.11.2018, 19:41

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

JavaScript
1
2
3
4
5
6
7
8
function funFactorial () {
 var resultFact = 1;
 var n = (document.getElementById('numFact').value);
 for(i = 1; i <= n; ++i) {
 resultFact *= i;
 }
document.getElementById('resultFact').innerHTML = resultFact;
}

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

А операция вывода на страницу должна быть отделена от объявления математической функции и должна жить абсолютно отдельно.

@Kearry · 12.11.2018, 18:21 **[ТС]**

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

кто такой font и зачем он нужен

это я знаю. у меня прописаны еще таблицы css.

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

почему input type="submit"

а что такого в использовании submit? почему лучше будет button?

Добавлено через 3 минуты

Сообщение от amr-now

А операция вывода на страницу должна быть отделена от объявления математической функции и должна жить абсолютно отдельно.

тогда нужно создать 2 отдельные функции? 1 для вычисления факториала, другую для вывода результатов на страничку html?

Может, вы подскажете, как это реализовать? потому что у меня пока получается создать рабочий скрипт только в случае, если я все запихну в одну функцию

@amr-now · 12.11.2018, 19:30

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

Может, вы подскажете, как это реализовать?

Файл script.js

JavaScript
1
2
3
4
5
6
7
8
function funFactorial (chisloFact) {
    var result = 1;
    for(i = 1; i <= chisloFact ; ++i) {
    result *= i;
        }
  return result;
  
}

HTML-файл из сообщения #2:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="./script.js"></script>
</head>
<body>
    <H2> Задача 1 <br> </H2>
    Поиск произведения чисел от 1 до N (факториала числа N)<br>
 
    Введите число N: <input type="text" id="chisloFact" size="50"> <br>
    <input type="button" id="buttonCalc" value="Вычислить"> <br>
    Результат:
    <HR>
    <div id="result"></div>
    <script>
        document.getElementById("buttonCalc").onclick = handler;
 
        function handler() {
            document.getElementById("result").textContent =
                funFactorial(document.getElementById("chisloFact").value);
        }
    </script>
</body>
</html>

@Kearry · 12.11.2018, 19:54 **[ТС]**

amr-now,
а стоит ли вставлять кусок скрипта в html, если поставили четкую задачу: все скрипты в отдельном файле.

@amr-now · 12.11.2018, 19:57

Kearry, расчеты в отдельном файле. Не обманывайте.

@Kearry · 13.11.2018, 16:57 **[ТС]**

amr-now,
Возможно,я не так понял преподавателя....

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Kearry 0 / 0 / 0 Регистрация: 02.11.2018 Сообщений: 26
	02.11.2018, 17:30 [ТС]
	amr-now спасибо. попробую. мне-то как раз и надо реализовать, не вставляя скрипт в html теги. скрипт будет в отдельном файле с расширением js 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	02.11.2018, 19:30
	кто такой font и зачем он нужен почему input type="submit" такие вопрос задаст учитель ) 0

@Kearry 0 / 0 / 0 Регистрация: 02.11.2018 Сообщений: 26
	12.11.2018, 19:54 [ТС]
	amr-now, а стоит ли вставлять кусок скрипта в html, если поставили четкую задачу: все скрипты в отдельном файле. 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	12.11.2018, 19:57
	Kearry, расчеты в отдельном файле. Не обманывайте. 0

@Kearry 0 / 0 / 0 Регистрация: 02.11.2018 Сообщений: 26
	13.11.2018, 16:57 [ТС]
	amr-now, Возможно,я не так понял преподавателя.... 0