Как вывести текст из атрибутов?

Question

Как вывести текст из атрибута поля input? Так как я сделал выводит только цифры корректно, а вместо текста выводит NaN (Нужно получить ТЕКСТ), прикрепил код, можно по нажатию на + посмотреть что выводит:

$('body').on('click', 'button.plus, button.minus', function() {

  var qty = $(this).parent().find('input'),

    name = parseInt(qty.attr('qwe'));
    
  console.log(name);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="123" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="Текст" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

Answer 1

Корень всех ваших проблем в том, что:

вы пытаетесь навесить на одно и тоже событие
- и получение числового значения
- и получение строкового значения
вы пытаетесь хранить в одном и том же атрибуте и строковое и числовое значение, семантически кардинально отличающихся друг от друга

Соответственно, вы сначала получили числовое значение атрибута и с помощью parseInt() привели его к числу.
НО потом с помощью того же обработчика события получаете строку из того же атрибута(только в другом элементе)
Вы получаете строку, пытаетесь ее распарсить parseInt() и закономерно получаете ошибку.

Я не знаю какие именно цели вы преследуете, поэтому попробую описать несколько вариантов решений.

Вариант №1

Предположим, что вы действительно столкнулись с такой ситуацией, что вам просто необходимо хранить в одном и том же атрибуте и строковые и целочисленные значения и обрабатывать их в одном обработчике событий.

Как тогда выпутаться из этого?
Все просто: нужно как-то определить что к нам пришло на вход число или строка.

Для этого можем написать незамысловатую функцию, основанной на паре регулярок, которая определяет, "является" ли переданная строка числом или нет:

function isNumeric(str) {
    if(str.match(/^-?\d+$/)) { return true; }
    if(str.match(/^\d+\.\d+$/)) { return true; }
    return false;
}

Соответственно позже мы можем определить в атрибуте число или просто строка и в зависимости от этого приводить все это дело к числу или же сохранять как есть

var typedAttrValue;
if(isNumeric(qty.attr('qwe'))){
    typedAttrValue = parseInt(qty.attr('qwe'));
} else {
    typedAttrValue = qty.attr('qwe');
}

ну или все тоже самое, только в одну строку:

typedAttrValue = isNumeric(qty.attr('qwe')) ? parseInt(qty.attr('qwe')) : qty.attr('qwe');

Замечание
Хочется отметить, что вы в верстке на кнопки также навешиваете обработчики событий

  <button ... onclick="stepDown()" ...>-</button>
  ...
  <button ... onclick="steUp()" ...>+</button>

Их в вопросе нет, и они тоже бросаются ошибками, поэтому я привожу внизу два рабочих примера, но:

в одном из них удаляю onclick="stepDown()" и onclick="steUp()"
в другом вставляю две пустые функции stepDown() и steUp()

Без onclick

function isNumeric(str) {
    if(str.match(/^-?\d+$/)) { return true; }
    if(str.match(/^\d+\.\d+$/)) { return true; }
    return false;
}

$('body').on('click', 'button.plus, button.minus', function() {
    var qty = $(this).parent().find('input'),
    typedAttrValue = isNumeric(qty.attr('qwe')) ? parseInt(qty.attr('qwe')) : qty.attr('qwe');   
    console.log(typedAttrValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-number">
  <button type="button" name="valueDown" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="123" min="1" max="50" step="1">
  <button type="button" name="valueUp" class="input-number-up  plus">+</button>
</div>

<div class="input-number">
  <button type="button" name="valueDown" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="Текст" min="1" max="50" step="1">
  <button type="button" name="valueUp" class="input-number-up  plus">+</button>
</div>

С заглушками на steUp и stepDown

function steUp(event) {
    // здесь Ваша реализация
}
function stepDown(event) {
    // здесь Ваша реализация
}

function isNumeric(str) {
    if(str.match(/^-?\d+$/)) { return true; }
    if(str.match(/^\d+\.\d+$/)) { return true; }
    return false;
}

$('body').on('click', 'button.plus, button.minus', function() {
  var qty = $(this).parent().find('input'),
      typedAttrValue = isNumeric(qty.attr('qwe')) ? parseInt(qty.attr('qwe')) : qty.attr('qwe');   console.log(typedAttrValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="123" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="Текст" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

Вариант №2

ну и второй вариант это развести эти значения по разным атрибутам и получать их отдельно

соответственно, я просто вместо

qwe="123"

и

qwe="Текст"

в разных элементах просто указываю, два разных атрибута qwe-int и qwe-string

qwe-int="456" qwe-string="Текст второго элемента"

И потом получаю их по отдельности, сохраняю в две разные переменные и один из них привожу к числу

var qweInt = parseInt(qty.attr('qwe-int')),
    qweString = qty.attr('qwe-string');

Здесь я указываю только один вариант с заглушками(onclick при необходимости можете убрать сами)

function stepDown(event){
   // Здесь ваша реализация данного метода
}
function steUp(event){
   // Здесь ваша реализация данного метода
}
$('body').on('click', 'button.plus, button.minus', function() {

  var qty = $(this).parent().find('input'),
      qweInt = parseInt(qty.attr('qwe-int')),
      qweString = qty.attr('qwe-string');
    
  console.log(qweInt);
  console.log(qweString);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe-int="123" qwe-string="Текст первого элемента" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe-int="456" qwe-string="Текст второго элемента" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

БЛОГ НА HUSL

Как вывести текст из атрибутов?

Ответы (1 шт):

Вариант №1

Без onclick

С заглушками на steUp и stepDown

Вариант №2