Как сделать разделение комой при вводе в инпут.
Всем доброго времени суток. Практикую разные задания по js. Есть такой скрипт:
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, а я делаю на jQuery. В решении в строке var arr = str.split('') в скобки просто добавили кому, но когда я так делаю в результат выводится введённые значения без изменений. Пожалуйста, подскажите почему так? |
Цитата:
|
Цитата:
Весь код выложил, HTML скинуть ещё? Или код на js? |
drakulawz,
что не так?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(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('=');
}
});
</script>
</head>
<body>
<input type="text" class="inp">
<p class="res"></p>
</body>
</html>
|
<!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;
}
|
drakulawz,
в чём проблема? или что сделать, чтобы обнаружить проблему? |
drakulawz,
кроме того, что ваш код не рационален в трёх местах, но он рабочий, проблем не вижу. |
Цитата:
Цитата:
Само условие: "Дан инпут. В него вводятся числа через запятую. По потери фокуса найдите среднее арифметическое этих чисел (сумма делить на количество)." |
drakulawz,
что такое "кома"? |
Цитата:
ИЗВИНИТЕ!:D Кома - это запятая по украински. :lol: |
| Часовой пояс GMT +3, время: 09:57. |