Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.09.2018, 13:34
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Как сделать разделение комой при вводе в инпут.
Всем доброго времени суток. Практикую разные задания по 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('') в скобки просто добавили кому, но когда я так делаю в результат выводится введённые значения без изменений. Пожалуйста, подскажите почему так?
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2018, 13:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от drakulawz
результат выводится введённые значения без изменений
пример где?
Ответить с цитированием
  #3 (permalink)  
Старый 03.09.2018, 13:57
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от рони
пример где?
Какой пример?
Весь код выложил, HTML скинуть ещё?
Или код на js?
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2018, 14:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 03.09.2018, 14:31
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

<!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;
}
Ответить с цитированием
  #6 (permalink)  
Старый 03.09.2018, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

drakulawz,
в чём проблема? или что сделать, чтобы обнаружить проблему?
Ответить с цитированием
  #7 (permalink)  
Старый 03.09.2018, 14:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

drakulawz,
кроме того, что ваш код не рационален в трёх местах, но он рабочий, проблем не вижу.
Ответить с цитированием
  #8 (permalink)  
Старый 03.09.2018, 14:54
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от рони
кроме того, что ваш код не рационален в трёх местах
подскажите пожалуйста, в каких местах и почему, для меня это важно, так как я ещё учусь. Хотелось бы не делать лишних телодвижений в будущем.
Сообщение от рони
но он рабочий, проблем не вижу
да, я же говорю, всё работает. Вот только по условию цифры должны разделятся комами. Это условие выполнимо? Или визуально (в самом инпуте) такого никак не добится и я не правильно понял условие?
Само условие:
"Дан инпут. В него вводятся числа через запятую. По потери фокуса найдите среднее арифметическое этих чисел (сумма делить на количество)."
Ответить с цитированием
  #9 (permalink)  
Старый 03.09.2018, 15:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

drakulawz,
что такое "кома"?
Ответить с цитированием
  #10 (permalink)  
Старый 03.09.2018, 15:25
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от рони
что такое "кома"?
...что я могу сказать - редко приходилось употреблять названия всяких знаков препинания на русском. В голове я понимаю, что пишу не правильно, но этого не замечаю даже когда несколько раз проверил текст!
ИЗВИНИТЕ! Кома - это запятая по украински.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы по картинке при нажатии на определенное место вылезала информация о KazZato Общие вопросы Javascript 1 16.05.2018 08:58
Как сделать? Выделение текста в div при нажатии на ссылку Olena Элементы интерфейса 3 01.03.2015 19:01
Как сделать, чтобы при вводе числа в поле добавлялись разделители групп разрядов? Hurray Элементы интерфейса 13 18.02.2015 14:07
Как сделать скрытие блока при клике на фон? clb Элементы интерфейса 6 11.06.2013 18:03
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06