<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="content">
<input class="inp" type="number" placeholder="number">
<p class="res">=</p>
</div>
</body>
</html>
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#content {
width: 200px;
height: 50px;
position: relative;
top: 100px;
left: 50%;
transform: translate(-50%, 50%);
background: #ccc;
border: 1px solid #000;
text-align: center;
padding: 10px;
}
.inp{
margin: 2px;
}
.res{
margin: 3px;
}
$(document).ready(function () {
var val = $('.inp'), //<input> с введёнными цифрами;
result = $('.res'); //<p> параграф с результатом;
$(val).on('focusout', total); //по потери фокуса выполняется функция по получению среднего арифметического введённых цифр;
function total() {
var sum = 0;
var str = val.val();
var arr = str.split('');
for (i = 0; i < arr.length; i++) {
sum += +arr[i];
var equal = sum/arr.length;
}
result.html(equal);
}
$(val).on('focusin', clear); //по получению фокуса очищается инпут и параграф;
function clear() {
val.val('');
result.html('=');
}
})
А вот кусок кода на JS - тот, что предлагает решение на сайте с задачей:
var elem = document.getElementById('num');
elem.addEventListener('blur', func);
function func() {
var sum = 0;
var str = elem.value;
var arr = str.split(',');
for (var i = 0; i < arr.length; i++) {
sum += +arr[i];
}
var newElem = document.getElementById('result');
newElem.innerHTML = sum/arr.length;
}