10217 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Veuillez m'excuser si je double le sujet mais je n'ai pas trouvé de pareilles demandes sur le forum.
Je cherche à faire des addition de chiffres mais avec une réduction de ceux-ci.
Je m'explique : 23 + 12 = 35 ==> 3+5 =8 . C'est assez facile de demander les chiffres à l'utilisateur et à les additionner mais la réduction, je sèche... sachant qu'en plus, j'ai une contrainte supplémentaire qui dit que si le chiffre est inférieur ou égal à 22, je conserve tel quel.
Pouvez-vous m'aiguiller un peu svp?
Merci
Rebonjour,
Je galère un peu...

J'essaie de récupérer une variable et d'en afficher une image...

Script :

function rn()
    {
           // var nom = document.getElementById("nom").value;
			var jour = document.getElementById("jour").value;
			//var mois = document.getElementById("mois").value;
			//var annee = document.getElementById("annee").value;
			var joururl='images/'+jour+'.jpg';                   
			document.getElementById('M1').setAttribute('src',joururl);                
    }



<body>
<form>
  <p>Votre nom:
    <input type="text" id="nom">
  </p>
  <p>jour:
    <select name="jour" id="jour">
      <option value="">Jour</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7" >7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19" >19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
      <option value="24">24</option>
      <option value="25">25</option>
      <option value="2">2</option>
      <option value="26">26</option>
      <option value="4">4</option>
      <option value="27">27</option>
      <option value="28">28</option>
      <option value="29" >29</option>
      <option value="30">30</option>
      <option value="31">31</option>
    </select>
  </p>
  <p>Mois:
    <select name="mois" id="mois" >
      <option value="" >Mois</option>
      <!--le mois-->
      <option value="1">Janvier</option>
      <option value="2">Février</option>
      <option value="3">Mars</option>
      <option value="4">Avril</option>
      <option value="5">Mai</option>
      <option value="6">Juin</option>
      <option value="7" >Juillet</option>
      <option value="8">Aout</option>
      <option value="9">Septembre</option>
      <option value="10">Octobre</option>
      <option value="11">Novembre</option>
      <option value="12">Décembre</option>
    </select>
  </p>
  <p>Année:
    <select  name="annee" id="annee">
      <option value="">Année</option>
      <!--le mois-->
      <option value="2018">2018</option>
      <option value="2017">2017</option>
      <option value="2016">2016</option>
      <option value="2015">2015</option>
      <option value="2014">2014</option>
      <option value="2013">2013</option>
      <option value="2012">2012</option>
      <option value="2011">2011</option>
      <option value="2010">2010</option>
      <option value="2009">2009</option>
      <option value="2008">2008</option>
      <option value="2007">2007</option>
      <option value="2006">2006</option>
      <option value="2005">2005</option>
      <option value="2004">2004</option>
      <option value="2003">2003</option>
      <option value="2002">2002</option>
      <option value="2001">2001</option>
      <option value="2000">2000</option>
      <option value="1999">1999</option>
      <option value="1998">1998</option>
      <option value="1997">1997</option>
      <option value="1996">1996</option>
      <option value="1995">1995</option>
      <option value="1994">1994</option>
      <option value="1993">1993</option>
      <option value="1992">1992</option>
      <option value="1991">1991</option>
      <option value="1990">1990</option>
      <option value="1989">1989</option>
      <option value="1988">1988</option>
      <option value="1987">1987</option>
      <option value="1986">1986</option>
      <option value="1985">1985</option>
      <option value="1984">1984</option>
      <option value="1983">1983</option>
      <option value="1982">1982</option>
      <option value="1981">1981</option>
      <option value="1980">1980</option>
      <option value="1979">1979</option>
      <option value="1978">1978</option>
      <option value="1977">1977</option>
      <option value="1976">1976</option>
      <option value="1975">1975</option>
      <option value="1974">1974</option>
      <option value="1973">1973</option>
      <option value="1972">1972</option>
      <option value="1971">1971</option>
      <option value="1970">1970</option>
      <option value="1969">1969</option>
      <option value="1968">1968</option>
      <option value="1967">1967</option>
      <option value="1966">1966</option>
      <option value="1965">1965</option>
      <option value="1964">1964</option>
      <option value="1963">1963</option>
      <option value="1962">1962</option>
      <option value="1961">1961</option>
      <option value="1960">1960</option>
      <option value="1959">1959</option>
      <option value="1958">1958</option>
      <option value="1957">1957</option>
      <option value="1956">1956</option>
      <option value="1955">1955</option>
      <option value="1954">1954</option>
      <option value="1953">1953</option>
      <option value="1952">1952</option>
      <option value="1951">1951</option>
      <option value="1950">1950</option>
      <option value="1949">1949</option>
      <option value="1948">1948</option>
      <option value="1947">1947</option>
      <option value="1946">1946</option>
      <option value="1945">1945</option>
      <option value="1944">1944</option>
      <option value="1943">1943</option>
      <option value="1942">1942</option>
      <option value="1941">1941</option>
      <option value="1940">1940</option>
      <option value="1939">1939</option>
      <option value="1938">1938</option>
      <option value="1937">1937</option>
      <option value="1936">1936</option>
      <option value="1935">1935</option>
      <option value="1934">1934</option>
      <option value="1933">1933</option>
      <option value="1932">1932</option>
      <option value="1931">1931</option>
      <option value="1930">1930</option>
      <option value="1929">1929</option>
      <option value="1928">1928</option>
      <option value="1927">1927</option>
      <option value="1926">1926</option>
      <option value="1925">1925</option>
      <option value="1924">1924</option>
      <option value="1923">1923</option>
      <option value="1922">1922</option>
      <option value="1921">1921</option>
      <option value="1920">1920</option>
      <option value="1919">1919</option>
      <option value="1918">1918</option>
      <option value="1917">1917</option>
      <option value="1916">1916</option>
      <option value="1915">1915</option>
      <option value="1914">1914</option>
      <option value="1913">1913</option>
      <option value="1912">1912</option>
      <option value="1911">1911</option>
      <option value="1910">1910</option>
      <option value="1909">1909</option>
      <option value="1908">1908</option>
      <option value="1907">1907</option>
      <option value="1906">1906</option>
      <option value="1905">1905</option>
    </select>
  </p>
  <input type="submit" onclick="rn();">
</form>
    <div class="cardresultwrapper">
           <h1>Référentiel naissance</h1>
            <div class="cardbox" id="box1">
               <img id="M1" src="images/no.png" />
            </div>
            <div class="cardbox" id="box2">
                <img id="Case2" src="images/no.png" />  
            </div>
            <div class="cardbox" id="box3">
                <img id="Case3" src="images/no.png" />
            </div>
            <div class="cardbox" id="box4">
                <img id="Case4" src="images/no.png" />
            </div>
    </div> 
</body>
J'avance... maintenant, je peux récupérer les images... grâce au chiffre donné. Mais il me l'écrit dans une autre page (ou réécrit la page...) j'aurais aimé qu'il l'écrive dans ma div par exemple.


function rn()
    {
          
			var jour = document.getElementById("jour").value;
			var mois = document.getElementById("mois").value;
			var annee = document.getElementById("annee").value;
		document.write('<img src="images/	' + jour + '.jpg">');
		document.write('<img src="images/	' + mois + '.jpg">');
		document.write('<img src="images/	' + annee + '.jpg">');
    }
au lieu de document.write, par exemple:

 
document.getElementById("box1").innerHTML = '<img src="images/	' + jour + '.jpg">';
kustolovic a écrit :
au lieu de document.write, par exemple:

 
document.getElementById("box1").innerHTML = '&lt;img src="images/	' + jour + '.jpg"&gt;';


Oui, j'avais déjà essayé mais justement, j'ai alors une "nouvelle page" avec seulement "not found"... Smiley decu
Salut

Je découvre que la discussion a évolué et je n'ai pas encore lu les nouveaux messages.

Je venais pour proposer une fonction pour traiter la totalité (addition de nombres et réduction) de la demande originale. Elle servira peut-être, la voici :

/**
 * La fonction reduce ajoute les nombres se trouvant dans 
 * l'Array arP.
 * Tant que le résultat est supérieure à la limite (récursif), 
 * il additionne les chiffres composant la somme.
 * @param {Array} arP
 * @param {Number} limite
 */
const reduce = ( arP = [ 0, 0 ], limite = 100 ) => {
    let n = arP.reduce( ( a, b ) => {
        return parseInt( a, 10 ) + parseInt( b, 10  );
    });

    if ( n > limite ){
        n = reduce( Array.from( String( n ) ), limite );
    }

    return n;
};

let 
    result1 = reduce(), // limite 100
    result2 = reduce ( [ 27, 32, 74 ] ), // limite 100
    result3 = reduce ( [ 61, 17 ], 50 ), // limite 50
    result4 = reduce ( [ 35, 27 ], 22 ), // limite 22
    result5 = reduce( [ '5', 9, '1358', 27 ], 10 ); // limite 10

console.log( 'reduce() = ', result1 ); // 0
console.log( 'reduce ( [ 27, 32, 74 ] ) = ', result2 ); // 7
console.log( 'reduce ( [ 61, 17 ], 50 ) = ', result3 ); // 15
console.log( 'reduce ( [ 35, 27 ], 22 ) = ', result4 ); // 8
console.log( `reduce( [ '5', 9, '1358', 27 ], 10 ) = `, result5 ); // 4
Merci pour cette fonction, je pense qu'elle va m'être utile...
Je suis quand même une bille en Javascript et j'avoue que je ne comprends pas tout, mais je vais étudier ça. Smiley smile