В JavaScript, как сделать так, чтобы при наведении курсора на ярлык в теге ap выводилось значение переключателя?

Question

Скажем, у меня есть список с переключателями. Как сделать так, чтобы при наведении курсора на метку значение переключателя записывалось в HTML в тег <p>?

Скажем так:

o Option One

Наведение указателя мыши на опцию Один записывает значение переключателя в тег <p> ниже.

Мой код указан ниже, и он не будет работать. Оно должно обновляться, если пользователь нажимает другую кнопку-переключатель.

function showDegree() {
    var degreeOptions = document.getElementsByName('degree');
    var degreeChoice;
    var i;

    for (i = 0; i < degreeOptions.length; i++) {
        if (degreeOptions[i].checked) {
            degreeChoice = degreeOptions[i].value;
        }
    }

    document.getElementById('degreeOutput').innerHTML = degreeChoice;
}

Answer 1

Вы должны использовать Событие, вы думаете о слове Hover (которое в основном предназначено для стиля), но в этом случае вам нужно подумать о слове onmouseover (которое предназначено для действий ... события).

Допустим, у вас есть это:

<input type=radio value="val1">Option 1
<p id=optDisplay></p>

Вы должны добавить в каждый input следующее:

<input type=radio value="val1" onmouseover="document.getElementById( 'optDisplay').textContent = this.value;">Option 1

Обратите внимание, что это произойдет, только когда указатель мыши находится над радиоэлементом, то есть только маленьким кружком, не будет работать, если вы наведете указатель на текст «Вариант 1». Если вы хотите добиться этого, вы можете обернуть элемент input и текст внутри другого тега, например span or div, который должен иметь onmouseover, например:

<span onmouseover="document.getElementById( 'optDisplay').textContent = this.firstChild.value;"><input type=radio value="val1"> Option 1</span>

Немного изменился onmouseover. Что касается того, что вы говорите об «обновлении» при нажатии, вам не нужно ничего делать, как будто вы щелкаете по нему, мышь будет над ним, и пока вы не указали другой вариант так и остался бы.

Было бы немного сложнее сделать после нажатия кнопку, чтобы предотвратить дальнейшие изменения, но подумав быстро, вы могли бы, например, добавить другое событие onclick, чтобы удалить идентификатор <P>, а затем после этого, если вы указали на другое вариант, что они не найдут <P>, без обновления.

Answer 2

попробуйте, если

.checked == true

или

если .checked == 'проверено'

- Извините, я настолько привык к кодированию вокруг jQuery, что забыл правильный способ сделать это нативным ... на этой ноте, если производительность не является проблемой, вы можете рассмотреть возможность использования jquery, это было бы просто в jquery.