Как передать введенное пользователем число в функцию в отдельном файле 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,
Возможно,я не так понял преподавателя....

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@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