@eXe1en7

OnClick jquery почему работает только при двойном нажатии?

Изменения срабатывают только после двух кликов по кнопке, подскажите как исправить ?
function changeValue(){
    $('.moreless').click(function() {
        var tempId = this.id;
        var tempValue = document.getElementById(tempId).value;
        if ( tempValue == "more ▼"){
            document.getElementById(tempId).value = "less ▲";
        }
        else {
            document.getElementById(tempId).value = "more ▼";
        }
    });
}

<input class="moreless" id="p-ibm" type="button" value="more &#9660" onclick="changeValue()">
  • Вопрос задан
  • 1968 просмотров
Решения вопроса 1
iCoderXXI
@iCoderXXI
React.JS/FrontEnd engineer
Ни к чему городить такой огород.

Задавать обработчик внутри тега не совсем кошерно с точки зрения гибкости и разделения логики и представления.

Убираем строку декларации функции function changeValue(){ и закрывающую скобку в конце блока кода }

Из инпута убираем onclick="changeValue()"

Декларацию обработчика клика $('.moreless').click(function() { переписываем на современный лад
$(document).on('click', '.moreless', function() { ... } );
данный подход универсален и работает даже если HTML добавляется на страницу динамически после инициализации обработчика события.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
@crazyhat
Web разработчик
Извнините за оффтоп, но в чем смысл использовать одновременно jquery селекторы и нативный js?
Ответ написан
Ну все правильно. При первом клике вы вешаете еще один обработчик на эту несчастную кнопку. А уже при втором срабатывает тот, что был повешен в предыдущий раз.
Уберите его, и все будет работать.
function changeValue(){
        var tempId = this.id;
        var tempValue = document.getElementById(tempId).value;
        if ( tempValue == "more ▼"){
            document.getElementById(tempId).value = "less ▲";
        }
        else {
            document.getElementById(tempId).value = "more ▼";
        }
}
Ответ написан
allishappy
@allishappy
function changeValue(){
        var tempId = this.id;
        var tempValue = document.getElementById(tempId).value;
        if ( tempValue == "more ▼"){
            document.getElementById(tempId).value = "less ▲";
        }
        else {
            document.getElementById(tempId).value = "more ▼";
        }
}


<input class="moreless" id="p-ibm" type="button" value="more &#9660" onclick="changeValue()">
Ответ написан
Комментировать
@Spaceoddity
function changeValue()
$('.moreless').click(function() {
	if($(this).val() == "more ▼") {
		$(this).val() == "less ▲"
	} else {
		$(this).val() == "more ▼"
	};
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы