Marche sur desktop pas sur smartphone ?

Bonjour

C'est une notation par étoiles dont les couleurs sont correctes sur desktop pas sur smartphone.

Sur mon Galaxy S4 les étoiles restent grises.

La gestion des couleurs est en javascript.

Voici le html :

Code:

<br />
<div class="sous_titre" itemprop="votes">15</div>
<div class="sous_titre">Votes</div>
&nbsp;&nbsp;<div class="sous_titre">3.7 / 7</div>
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<ul id="rating">
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="1">
            <input type="submit" value="&#9733;" aria-label="1 &eacute;toile">
   
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="2">
            <input type="submit" value="&#9733;" aria-label="2 &eacute;toiles">
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="3">
            <input type="submit" value="&#9733;" aria-label="3 &eacute;toiles">
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="4">
            <input type="submit" value="&#9733;" aria-label="4 &eacute;toiles">
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="5">
            <input type="submit" value="&#9733;" aria-label="5 &eacute;toiles">
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="6">
            <input type="submit" value="&#9733;" aria-label="6 &eacute;toiles">
        </form></li><li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
            <form action="https://www.pronostics-courses.fr/" method="post">
                <input type="hidden" name="note" value="7">
                <input type="submit" value="&#9733;" aria-label="7 &eacute;toiles">
            </form>
        </li>
</ul>
<ul id="current-rating">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
<meta itemprop="average" content="3.7" />
<meta itemprop="best" content="7" />
<meta itemprop="worst" content="1" />
</div>
&nbsp;&nbsp;<div id="message">
</div>
</div>

Et voici le Javascript :

Code:

<script>
function OnMouseOver(li)
{
    var i, j, k;
    /**
    * On met les étoiles grises
    * au dessus de
    * l'étoile cochée.
    **/
    for(tmp_li = li.nextSibling; tmp_li !== null; tmp_li = tmp_li.nextSibling)
    {
        if(tmp_li.children[0].tagName == "FORM")
        {
            var form = tmp_li.children[0];
            var input = form.childNodes;
            for(i = 0; i < input.length; i++)
            {
                var tmp_input = input[i];
                if(tmp_input.type == "submit")
                {
                    tmp_input.style.color = "#c9f088";
                }
            }
        }
    }
    /**
    * On met les étoiles orange
    * au dessous de
    * l'étoile cochée.
    **/
    for(tmp_li = li; tmp_li !== null; tmp_li = tmp_li.previousSibling)
    {
        if(tmp_li.children[0].tagName == "FORM")
        {
            var form = tmp_li.children[0];
            var input = form.childNodes;
            for(i = 0; i < input.length; i++)
            {
                var tmp_input = input[i];
                if(tmp_input.type == "submit")
                {
                    tmp_input.style.color = "orange";
                }
            }
        }
    }
    return(true);
}
function OnBodyLoaded()
{
    var i, j, k;
    var ul = document.getElementById("rating");
    var tmp_li = ul.childNodes;
    for(i = 0; i < tmp_li.length; i++)
    {
        var tmp_tmp_li = tmp_li[i];
        if(tmp_tmp_li.tagName == "LI")
        {
            if(tmp_tmp_li.children[0].tagName == "FORM")
            {
                var form = tmp_tmp_li.children[0];
                var input = form.childNodes;
                for(j = 0; j < input.length; j++)
                {
                    var tmp_input = input[j];
                    if(tmp_input.type == "submit")
                    {
                        tmp_input.style.color = "#c9f088";
                    }
                }
            }
        }
    }
    return(true);
}
</script>

Les body ont ceci :

<body onload="OnBodyLoaded()" itemscope itemtype="http://schema.org/WebPage">

Pourquoi les couleurs ne changent pas ?

L'événement onfocus ne suffit pas ?

Le onload ne fait rien ?

Comment faire ?

Amicalement.

 

Pardon

J'ai essayé même en css, çà ne fonctionne pas en smartphone.

J'ai un vieux Galaxy S4.

La couleur transparent est correcte, les autres couleurs donnent du grisé.

Je suspecte un bug d'Android par rapport aux submit.

Sur votre smartphone çà marche ?

Url : https://www.pronostics-courses.fr

Il faut théoriquement accepter les cookies.

Merci beaucoup de vos réponses.

Respectueusement.

 

Bonjour ABCWEB

J'ai onmouseover et onfocus

Je ne sais pas très bien de quels événements tenir compte.

Je croyais que ( sur un smartphone ) le onfocus se produisait de la même façon que le onclick.

Merci beaucoup pour ton aide.

Amicalement.

 

Bonjour ABCWEB

Voici la page : https://www.quirksmode.org/dom/events/index_mobile.html

Le onfocus n'y figure pas le onclick est considéré sûr, et les onmouseover/onmouseout ?

Je vais tester le onclick.

Peut-être mon onfocus met le souk ?

Merci beaucoup.

Amicalment.

 

Hé bé

L e fait est que les classes css "on" et "off" sont correctement affectées aux buttons.

J'ai mis maintenant des <button> aux lieu des <input> , et résultat identique.

Mais sur Google Page Insight la couleur "palegreen" est bien affectée aux <button>.

Evidemment, impossible de tester avec Chrome.

Sus vos portables çà marche ?

Merci beaucoup.

Amicalement.