Не работает счетчик уменьшения/увеличения и появляются даблклики?

Question

[Genri_Rus]

Доброго времени суток
Есть небольшой код:

<div class="myclass">
<span onClick="prev()">-</span>
<input type="text" id="counter" disabled value="1">
<span onClick="next()">+</span>
</div>

function prev(id){
    if(id===undefined){
        if(var i=("counter").value>1) i("counter").value--;
    }
    else{
        var m=i("counter"+id).value;
        if(m>1){
            m--;
        }
    }
}

function next(id){
    if(id===undefined){
        if(var i=("counter").value<20) i("counter").value++;
    }
    else{
        var m=i("counter"+id).value;
        if(m<20){
            m++;
        }
    }
}

При нажатии на span счетчик не уменьшает и не увеличивает, где может быть ошибка ?
А также появляются даблклики, как можно их убрать ?

Answer 1

[Павел Корнилов]

Правильнеее оптимизировать так:
1. Использовать единую функцию
2. Сделать возможность изменения значения инкремента от 1.
Можно ещё оптимизировать навешивание событий - инлайн сейчас критикуют, но это уже не принципиально.



https://codepen.io/KorniloFF/pen/bzEORy?editors=1111

Comments

[Genri_Rus]

Это работает, но вот только в минус уходит, а есть вариант без минуса ?
К примеру только диапазон не меньше 1

[Павел Корнилов]

Genri_Rus, а где это условие в вопросе? Или я угадать должен был?

Подправил код - https://codepen.io/KorniloFF/pen/bzEORy?editors=1111

[Genri_Rus]

Павел Корнилов, это условие каким-то образом работает, там где оно присутствует

[Павел Корнилов]

Genri_Rus, ну, теперь всё как нужно работает?

[Genri_Rus]

Павел Корнилов, да все супер, но и еще такой вопрос, при нажатии на плюс или минус у меня почему-то все выделяется синей обводкой, как будто я что-то постоянно выделяю
Ее как-то можно убрать ?

[Павел Корнилов]

Genri_Rus, это выделение текста даблкликом - стандартное поведение любого броузера.
Можете погуглить на эту тему или задать новый вопрос - к текущему это отношения не имеет.
Если по вопросу всё, то отмечайте решением, чтобы люди сюда лишний раз не заходили, пытаясь помочь.

[Genri_Rus]

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

[Павел Корнилов]

Genri_Rus, потому, что вопросы:

Не работает счетчик уменьшения/увеличения?

При нажатии на span счетчик не уменьшает и не увеличивает, где может быть ошибка ?

И они полностью закрыты. Разве нет?

[Genri_Rus]

Павел Корнилов, я могу изменить вопрос, это не проблема

[Павел Корнилов]

Genri_Rus, поймите, вопрос объёмный. В разных броузерах - решается по-разному, полного решения даже я не помню наизусть.
Вот, частичное решение я добавил в код - но у меня в Мозилле работать не хочет.
https://codepen.io/KorniloFF/pen/bzEORy?editors=1111

[Павел Корнилов]

Genri_Rus, вроде, получилось, ссылка та же. Обновите страницу.

[Genri_Rus]

Павел Корнилов, спасибо вам, я даже не знал как правильно гуглить )
Я так понял это называется дубликлики ?

[Павел Корнилов]

Genri_Rus, так я уже в коде выложил защиту от выделения.
https://codepen.io/KorniloFF/pen/bzEORy?editors=1111
Там совмещены JS и CSS варианты защиты.

А правильно гуглить по вашему вопросу нужно так -

Answer 2

[Сергей]

if(var i("counter").value..

Это на каком языке? Сравнивать переменную, которую только что создал - странное дело.. да и блок по идентификатору получать надо через

document.getElementById('counter')

В итоге:

function prev(id){
var counter = document.getElementById('counter'+(id===undefined?'':id)).value;
document.getElementById('counter'+(id===undefined?'':id)).value = counter.value>1?counter--:counter;
}

function next(id){
var counter = document.getElementById('counter'+(id===undefined?'':id)).value;
document.getElementById('counter'+(id===undefined?'':id)).value = counter.value<20?counter++:counter;
}

Comments

[Genri_Rus]

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

function prev(id){
    if(id===undefined){
        if(("counter").value>1) ("counter").value--;
    }
    else{
        var m = ("counter"+id).value;
        if(m>1){
            m--;
        }
    }
}

function next(id){
    if(id===undefined){
        if(("counter").value<20) ("counter").value++;
    }
    else{
        var m = ("counter"+id).value;
        if(m<20){
            m++;
        }
    }
}

Не знаете в чем ошибка конкретно этого кода ?
Функции вызываются с помощью onclick

[Сергей]

Genri_Rus, ("counter") - какая-то фигня. Правильно - document.getElementById("counter").

Но учтите, что Вы изменяете не значение формы, а значение локальных переменных

[Genri_Rus]

Сергей, у меня ваш код почему-то не работает

Answer 3

[Евгений Орлов]

Если Вы имеете css-стили, то тоже скидывайте их вместе с остальным кодом, так как не совсем понятно что делают элементы на странице.
Как минимум ошибка в условностях:


Определите в отдельную переменную, а лучше напишите логику исполнения кода.

Comments

[Genri_Rus]

Просто в span есть плюс и минус
При нажатии на их - соответственно должно быть уменьшение или увеличение

Насчет ошибки в консоли, я забыл поставить равно перед переменной i
Исправил код в теме вопроса