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

Question

[eXe1en7]

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

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()">

Answer 1

[Андрей]

Ни к чему городить такой огород.

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

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

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

Декларацию обработчика клика $('.moreless').click(function() { переписываем на современный лад
$(document).on('click', '.moreless', function() { ... } );
данный подход универсален и работает даже если HTML добавляется на страницу динамически после инициализации обработчика события.

Answer 2

[crazyhat]

Извнините за оффтоп, но в чем смысл использовать одновременно jquery селекторы и нативный js?

Comments

[Дмитрий Кузнецов]

Тоже немного в недоумении)

[eXe1en7]

tempId.val("more ▼");
tempId.val is not a function

[Dvorak]

всё правильно он делает. value в данном случае нельзя применить к объекту jQuery, поэтому приходится писать частично нативный код

[Spaceoddity]

Михаил Макарычев: Т.е. $(tempId).val("..."); нельзя???

[eXe1en7]

Spaceoddity: так я тоже пробовал, не работает

[Spaceoddity]

eXe1en7: так в том-то и дело, что у вас там мешанина кода из нативного и jQ. Вот https://jsfiddle.net/rdobu8gh/1/ всё работает

[Spaceoddity]

eXe1en7: и это... я бы поостерёгся в качестве сравнения значения элементов мнемоники использовать

[eXe1en7]

Spaceoddity: спасибо

[Dvorak]

Spaceoddity: виноват, признаю ошибку. Когда я пытался использoвать $('#id').value, то вылезала ошибка. $('#id').val даже не пробовал. Спасибо!

Answer 3

[Алексей Николаев]

Ну все правильно. При первом клике вы вешаете еще один обработчик на эту несчастную кнопку. А уже при втором срабатывает тот, что был повешен в предыдущий раз.
Уберите его, и все будет работать.

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 ▼";
        }
}

Comments

[eXe1en7]

Uncaught TypeError: Cannot read property 'value' of nullchangeValue

Answer 4

[Dvorak]

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()">

Answer 5

[Spaceoddity]

function changeValue()

$('.moreless').click(function() {
	if($(this).val() == "more ▼") {
		$(this).val() == "less ▲"
	} else {
		$(this).val() == "more ▼"
	};
});

Comments

[eXe1en7]

мне нужен id для других ещё целей
не только для этого, поэтому я его использую
но спасибо!

[Spaceoddity]

eXe1en7: вообще суть проблемы в том, что вы функцию вызываете по событию "onclick", а потом в ней же якобы навешиваете обработчик на клик, а по факту просто программно делаете ещё один клик. убирайте обработчик из функции - просто условие и результат.