'Javascript document.activeElement is undefined on mobile

So currently this function works on desktop but when I test it on mobile I get "undefined." I checked to see if activeElement is compatible on iPhone safari and it says it works there so I'm currently lost. Any fixes or alternatives?

This is the button that is selected.

<input type='button' id='slogan-button' onclick='changeSlogan()' value='Junior Varsity'>

This is the function to make it work.

<script>
    function changeSlogan() {
        const activeSlogan = document.activeElement.value;
      document.getElementById('slogan-input').value = activeSlogan;
      document.getElementById('slogan-display').innerHTML = activeSlogan;
    }
</script>

This is supposed to allow a slogan to be selected and the value of the slogan is added into a input, I get the equal value of the selected slogan only on desktop.

Solution 1:^[1]

The definition of an ActiveElement is an element which is currently in focus. The elements which are focusable vary by platform with no guarantees. For example, MacOS only considers inputs to be focusable. Based on what you wrote, it seems like iOS is the same.

Use the “click” event instead.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Slava Knyazev

'Javascript document.activeElement is undefined on mobile

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]