11521 sujets

JavaScript, DOM et API Web HTML5

Addition et réduction de chiffres.

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
Modérateur
Bonjour, voici de quoi méditer:


alert('1234'.split('').reduce(function(a,b){ return parseInt(a,10)+parseInt(b,10); }));


La clé étant dans split et reduce
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">');
    }
Modérateur
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
Et bien même si ça m'a pris du temps... en effet, c'est un projet qui m'occupe pendant mes temps libres... j'ai réussi (grâce à l'aide de mon fils) à passer outre mes soucis.
Je peux passer à l'étape suivante. Smiley cligne
Pou ceux qui aime ça, je partage mon code... 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
<script src="js/rn.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css" >
</head>
<body>
<h1 class="text-center">Référentiel de naissance</h1>
<form>
  <p>Votre nom:
    <input type="text" id="nom">
  </p>
  <p>Date de naissance :
    <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="26">26</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>  
	<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>
	<select  name="annee" id="annee">
      <!--le mois-->
      <option value="2018">2020</option>
      <option value="2018">2019</option>
      <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>
  <p>Année concernée:
    <select  name="annee" id="anneeconcernee">
      <option value="2020">2020</option>
      <option value="2019">2019</option>
      <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>
  <button type="button" onclick="rn();" class="btn btn-warning">Créer</button>
</form>
<div class="cardresultwrapper">
  <hr>
  <div class="container">
    <div class="row">
      <div class="col-10">
        <div class="row ">
			<div class="col"></div>
			<div class="col"></div>
          <div id="M12" class="col"> <img  src="images/back.jpg" /> </div>
			<div class="col"></div>
        </div>
        <div class="row mt-1 mb-3">
			<div class="col"></div>
          <div class="col rot-45" id="M6"> <img  src="images/back.jpg" /> </div>
          <div class="col" id="M1"> <img  src="images/back.jpg" /> </div>
          <div class="col rot45" id="M8"> <img  src="images/back.jpg" /> </div>
        </div>
        <div class="row">
          <div class="col-3" id="M9"> <img  src="images/back.jpg" /> </div>
          <div class="col-3" id="M2"> <img  src="images/back.jpg" /> </div>
          <div class="col-3" id="M5"> <img  src="images/back.jpg" /> </div>
          <div class="col-3" id="M4"> <img  src="images/back.jpg" /> </div>
        </div>
        <div class="row mt-3 mb-1">
			<div class="col"></div>
          <div class="col rot45" id="M7"> <img  src="images/back.jpg" /> </div>
          <div class="col" id="M3"> <img  src="images/back.jpg" /> </div>
          <div class="col rot-45" id="M10"> <img  src="images/back.jpg" /> </div>
        </div>
		  <div class="row">
			  <div class="col"></div>
			  <div class="col"></div>
        <div class="col" id="M11"> <img  src="images/back.jpg" /> </div>
			  <div class="col"></div>
		  </div>
      </div>
      <div class="col-2">
		  <div class="row align-self-center">
        <div class="col-12" id="M13"> <img  src="images/back.jpg" /> </div>
        <div class="col-12" id="M14"> <img  src="images/back.jpg" /> </div>
			  <div class="col-12"> <p id="superdomicile"></p> </div>
			  </div>
      </div>
    </div>
  </div>
	<hr>
	<div class="container">
		
	<div class="row">
		<div class="col-8">
			<h2>Les arcanes cachés</h2>
			<div class="row">
				
				<div class="col-3" id="empreinte"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="m4bis"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="m4ter"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="MAV"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="hnord"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="hsud"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="echelle"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="ceinture"> <img  src="images/back.jpg" /> </div>	
				<div class="col-3" id="DP"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="venus"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="reve"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="barre"> <img  src="images/back.jpg" /> </div>
				<div class="col-3" id="bande"> <img  src="images/back.jpg" /> </div>
				
			</div>
		</div>
		<div class="col-4">
		<h2>Les dialectiques</h2>
	<div class="row">
		<ul>
			<li id="refcond"></li>
			<li id="persasy"></li>
			<li id="refexp"></li>
			<li id="refconj"></li>
			<li id="double"></li>
			<li id="cohabs"></li>
			<li id="refcomp"></li>
			<li id="paradox"></li>
			<li id="defi"></li>
			<li id="empech"></li>
			<li id="total"></li>
			<li id="m4m10"></li>
			<li id="impasse"></li>
			<li id="decont"></li>
		</ul>
		</div>
	</div>
		</div>
	</div>
	<hr>
	
</div>
</body>
</html>


Je vous épargne les injections de Boostrap... mais voici le js :


function rn()
    {	
		var tab = new Array(4);
		
		var jour = document.getElementById("jour").value;
		var mois = document.getElementById("mois").value;
		var annee = document.getElementById("annee").value;
		var anneeconcernee = document.getElementById("anneeconcernee").value; 
		
		var m4 = parseInt(jour)+parseInt(mois)+parseInt(annee);
		while (m4 > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m4%10;
    	m4=m4 - (m4%10);
			m4/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m4 = result;
}
		var m5 = m4*2;
		
		if (m5 > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m5%10;
    	m5=m5 - (m5%10);
			m5/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m5 = result;
		}

		while (jour > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=jour%10;
    	jour=jour - (jour%10);
			jour/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	jour = result;
}
		while (annee > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=annee%10;
    	annee=annee - (annee%10);
			annee/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	annee = result;
}
		var m6 = parseInt(jour)+parseInt(mois);
		if (m6 > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m6%10;
    	m6=m6 - (m6%10);
			m6/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m6 = result;
}
		var m7 = Math.abs(parseInt(annee)-parseInt(mois));
		if (m7== 0){
			m7 = 22;
		}
		var m8 = parseInt(anneeconcernee);
		if (m8 > 9) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m8%10;
    	m8=m8 - (m8%10);
			m8/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m8 = result+parseInt(m6);
}
		if (m8 == 22 || m8 == 11){
		m8 = m8;
}
		else if (m8 > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i] = m8%10;
			m8 = m8 - (m8%10);
			m8/=10;
}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m8 = result;
}
		
		var m9 = m6 + m7;
		
		if (m9 > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m9%10;
    	m9 = m9 - (m9%10);
			m9/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m9 = result;
}
		
		var m10 = 22-parseInt(m9);
		var m11 = parseInt(m7)+parseInt(m10)+parseInt(annee);
		
		while (m11 > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m11%10;
    	m11 = m11 - (m11%10);
			m11/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m11 = result;
}
		
		var m12 = m6 + parseInt(mois) + m4;

		if (m12 > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m12%10;
    	m12 = m12 - (m12%10);
			m12/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m12 = result;
}
		var m13 = m12 + parseInt(jour) + m5 + parseInt(annee) +  m11 + m9 + parseInt(mois) + m5 + m4;
		
		if (m13 > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m13%10;
    	m13 = m13 - (m13%10);
			m13/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m13 = result;
}
		var m14 = parseInt(jour) + parseInt(mois) + parseInt(annee) + m4;
		if (m14 > 56) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m14%10;
    	m14 = m14 - (m14%10);
			m14/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m14 = result;
}
		
		
		var joururl='<p class="m">M1</p><img id="m1img" src="images/'+jour+'.jpg">';
		var moisurl='<p class="m">M2</p><img id="m2img" src="images/'+mois+'.jpg">'; 
		var anneeurl='<p class="m">M3</p><img id="m3img" src="images/'+annee+'.jpg">';
		var m4url='<p class="m">M4</p><img id="m4img" src="images/'+m4+'.jpg">';
		var m5url='<p class="m">M5</p><img id="m5img" src="images/'+m5+'.jpg">';
		var m6url='<p class="m">M6</p><img id="m6img" src="images/'+m6+'.jpg">';
		var m7url='<p class="m">M7</p><img id="m7img" src="images/'+m7+'.jpg">';
		var m8url='<p class="m">M8</p><img id="m8img" src="images/'+m8+'.jpg">';
		var m9url='<p class="m">M9</p><img id="m9img" src="images/'+m9+'.jpg">';
		var m10url='<p class="m">M10</p><img id="m10img" src="images/'+m10+'.jpg">';
		var m11url='<p class="m">M11</p><img id="m11img" src="images/'+m11+'.jpg">';
		var m12url='<p class="m">M12</p><img id="m12 img" src="images/'+m12+'.jpg">';
		var m13url='<p class="m">Coeur de blason<br>M13</p><img id="m13img" src="images/'+m13+'.jpg">';/*ajouter tab m13 -1 créer un tableau avec les phrases de coeur de blason*/
		var m14url='<p class="m">AMS<br>M14</p><img id="m14img" src="images/mineures/'+m14+'.jpg">';
		
		document.getElementById("M1").innerHTML = joururl;
		document.getElementById("M2").innerHTML = moisurl;
		document.getElementById("M3").innerHTML = anneeurl;
		document.getElementById("M4").innerHTML = m4url;
		document.getElementById("M5").innerHTML = m5url;
		document.getElementById("M6").innerHTML = m6url;
		document.getElementById("M7").innerHTML = m7url;
		document.getElementById("M8").innerHTML = m8url;
		document.getElementById("M9").innerHTML = m9url;
		document.getElementById("M10").innerHTML = m10url;
		document.getElementById("M11").innerHTML = m11url;
		document.getElementById("M12").innerHTML = m12url;
		document.getElementById("M13").innerHTML = m13url;
		document.getElementById("M14").innerHTML = m14url;
		
		
		var barre = m8 + m5 + m7;
		while (barre > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=barre%10;
    	barre = barre - (barre%10);
			barre/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	barre = result;
}
		var bande = m6 + m5 + m10;
		while (bande > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=bande%10;
    	bande = bande - (bande%10);
			bande/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	bande = result;
}
		var anneeempreinte = annee
		if (anneeempreinte > 9) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=anneeempreinte%10;
    	anneeempreinte = anneeempreinte - (anneeempreinte%10);
			anneeempreinte/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	anneeempreinte = result;
}
		var empreinte=m6 +anneeempreinte;
		
		if (empreinte > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=empreinte%10;
    	empreinte = empreinte - (empreinte%10);
			empreinte/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	empreinte = result;
}
		var echelle = m12 + jour + m5 + annee + m11;
		while (echelle > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=echelle%10;
    	echelle = echelle - (echelle%10);
			echelle/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	echelle = result;
}
		var ceinture = m9 + mois + m5 + m4;
		if (ceinture > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=ceinture%10;
    	ceinture = ceinture - (ceinture%10);
			ceinture/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	ceinture = result;
}
		var hnord = m6 + jour + m8 + m12;
		while (hnord > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=hnord%10;
    	hnord = hnord - (hnord%10);
			hnord/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	hnord = result;
}
		var hsud = m7 + annee + m10 + m11;
		if (hsud > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=hsud%10;
    	hsud = hsud - (hsud%10);
			hsud/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	hsud = result;
}
		var DP = Math.abs(hnord-hsud);
		var venus = 22-mois;
		
		var reve = mois + annee + m4;
		if (reve > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=reve%10;
    	reve = reve - (reve%10);
			reve/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	reve = result;
		}
		var MAV = Math.abs(m4-m7);
		
		var m4bis = m4 + 9;
		if (m4bis > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m4bis%10;
    	m4bis = m4bis - (m4bis%10);
			m4bis/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m4bis = result;
		}
		var m4ter = m4bis + 22;
		if (m4ter > 22) {
		for (i=0 ; i < 4 ; i++) {
    	tab[i]=m4ter%10;
    	m4ter = m4ter - (m4ter%10);
			m4ter/=10;
		}
		result = tab[0]+tab[1]+tab[2]+tab[3];
    	m4ter = result;
		}
		
		
		
		var barreurl='<p class="m">Barre</p><img src="images/'+barre+'.jpg">';
		var bandeurl='<p class="m">Bande</p><img src="images/'+bande+'.jpg">';
		var empreinteurl='<p class="m">Empreinte</p><img src="images/'+empreinte+'.jpg">';
		var m4bisurl='<p class="m">M4<sup>bis</sup></p><img src="images/'+m4bis+'.jpg">';
		var m4terurl='<p class="m">M4<sup>ter</sup></p><img src="images/'+m4ter+'.jpg">';
		var echelleurl='<p class="m">Echelle de Jacob</p><img src="images/'+echelle+'.jpg">';
		var ceintureurl='<p class="m">La ceinture</p><img src="images/'+ceinture+'.jpg">';
		var hnordurl='<p class="m">Hémisphère nord</p><img src="images/'+hnord+'.jpg">';
		var hsudurl='<p class="m">Hémisphère sud</p><img src="images/'+hsud+'.jpg">';
		var dpurl='<p class="m">Mod. DP</p><img src="images/'+DP+'.jpg">';
		var venusurl='<p class="m">Part de Vénus</p><img src="images/'+venus+'.jpg">';
		var reveurl='<p class="m">Rêve de vie</p><img src="images/'+reve+'.jpg">';
		var MAVurl='<p class="m">MAV</p><img src="images/'+MAV+'.jpg">';
		
		

		
		
		document.getElementById("barre").innerHTML = barreurl;
		document.getElementById("bande").innerHTML = bandeurl;
		document.getElementById("empreinte").innerHTML = empreinteurl;
		document.getElementById("m4bis").innerHTML = m4bisurl;
		document.getElementById("m4ter").innerHTML = m4terurl;
		document.getElementById("echelle").innerHTML = echelleurl;
		document.getElementById("ceinture").innerHTML = ceintureurl;
		document.getElementById("hnord").innerHTML = hnordurl;
		document.getElementById("hsud").innerHTML = hsudurl;
		document.getElementById("DP").innerHTML = dpurl;
		document.getElementById("venus").innerHTML = venusurl;
		document.getElementById("reve").innerHTML = reveurl;
		document.getElementById("MAV").innerHTML = MAVurl;
		
		
		
	
		/**Domiciles et super domiciles**/
		
			
		
		if (jour == 19){
			document.getElementById("m1img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (mois == 9){
			document.getElementById("m2img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
			
		if (annee == 21){
			document.getElementById("m3img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m4 == 4){
			document.getElementById("m4img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m5 == 10){
			document.getElementById("m5img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m6 == 17){
			document.getElementById("m6img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
			}
		if (m7 == 16){
			document.getElementById("m7img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m8 == 20){
			document.getElementById("m8img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m9 == 11){
			document.getElementById("m9img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m10 == 11){
			document.getElementById("m10img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m11 == 12){
			document.getElementById("m11img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m12 == 22){
			document.getElementById("m12img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
		if (m13 == 7){
			document.getElementById("m12img").className += "superdomicile";
			document.getElementById("superdomicile").innerHTML = 'Il y a au moins un superdomicile';
		}
	
		
	/**les dialectiques***/
		
	//var tabdial =[jour, mois, annee, m4, m5, m6, m7, m8,m9,m10,m11, m12, m13];
		//alert(tabdial);
		if (jour == mois){
			document.getElementById("refcond").innerHTML = 'Référent contradictoire: oui';
		}
		else{
			document.getElementById("refcond").innerHTML = 'Référent contradictoire: non';
		}
		if (jour == annee){
			document.getElementById("persasy").innerHTML = 'Perspective asymétrique: oui';
		}
		else{
			document.getElementById("persasy").innerHTML = 'Perspective asymétrique: non';
		}
		if (jour == m4){
			document.getElementById("refexp").innerHTML = 'Référent exploratoire: oui';
		}
		else{
			document.getElementById("refexp").innerHTML = 'Référent exploratoire: non';
		}
		if (jour == m7){
			document.getElementById("refconj").innerHTML = 'Référent conjuratoire: oui';
		}
		else{
			document.getElementById("refconj").innerHTML = 'Référent conjuratoire: non';
		}
		if (jour == m10){
			document.getElementById("double").innerHTML = 'Double contrainte: oui';
		}
		else{
			document.getElementById("double").innerHTML = 'Double contrainte: non';
		}
		if (m6 == m4){
			document.getElementById("cohabs").innerHTML = 'Cohérence absolue: oui';
		}
		else{
			document.getElementById("cohabs").innerHTML = 'Cohérence absolue: non';
		}
		if (m7 == m4){
			document.getElementById("refcomp").innerHTML = 'Référent compensatoire: oui';
		}
		else{
			document.getElementById("refcomp").innerHTML = 'Référent compensatoire: non';
		}
		if (m6 == m7){
			document.getElementById("paradox").innerHTML = 'Problématique paradoxale: oui';
		}
		else{
			document.getElementById("paradox").innerHTML = 'Problématique paradoxale: non';
		}
		if (m6 == m7){
			document.getElementById("defi").innerHTML = 'Défi défigurant: oui';
		}
		else{
			document.getElementById("defi").innerHTML = 'Défi défigurant: non';
		}
		if (m6 == m10){
			document.getElementById("empech").innerHTML = 'Aspect d\'empêchement: oui';
		}
		else{
			document.getElementById("empech").innerHTML = 'Aspect d\'empêchement: non';
		}
		if (m11 == m12){
			document.getElementById("total").innerHTML = 'Totale conversion: oui';
		}
		else{
			document.getElementById("total").innerHTML = 'Totale conversion: non';
		}
		if (m4 == m10){
			document.getElementById("m4m10").innerHTML = 'M4 = M10: oui';
		}
		else{
			document.getElementById("m4m10").innerHTML = 'M4 = M10: non';
		}
		if (m5 == m7){
			document.getElementById("impasse").innerHTML = 'Impasse référent: oui';
		}
		else{
			document.getElementById("impasse").innerHTML = 'Impasse référent: non';
		}
		if (m8 == m10){
			document.getElementById("decont").innerHTML = 'Décontamination: oui';
		}
		else{
			document.getElementById("decont").innerHTML = 'Décontamination: non';
		}
	}


Il me faut maintenant passer à la suite... vous voyez qu'il y a des comparaisons entre les valeurs...
Je dois par exemple obtenir des sommes = à 22 entre deux valeurs de chacunes des maisons. J'ai créé un tableau qui les reprend :

var countmaison = new Array(13);
countmaison=[jour, mois, annee, m4, m5, m6, m7, m8,m9,m10,m11, m12, m13];

Ce qui dans ce cas donne ceci = 8,7,7,22,8,15,22,19,10,12,5,8,11
On voit dans l'exemple que 7 + 15 = 22 (et même deux fois), 10 +12 = 22, etc.
Quelqu'un aurait une piste pour vérifier ça svp?
Merci de votre temps et votre support.
Sujet clos
Aller à