Je n'arrive pas à terminer mon programme Javascript.

Fermé
LittleBoyPass Messages postés 1 Date d'inscription samedi 25 mai 2013 Statut Membre Dernière intervention 25 mai 2013 - Modifié par LittleBoyPass le 25/05/2013 à 08:44
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 28 mai 2013 à 02:09
Tout d'abord bonjour à tous, je m'appelle Julien et je suis étudiant.
J'adore la programmation et j'ai trouver de nombreuses réponses sur ce forum!
Je vous explique mon problème.
J'essaye de faire un genre de "QRcode" mais qui ne sera "lu" seulement par l'ordinateur.
Mon "QRcode" code un numéro de télèphone, c'est donc un tableau de 4 colonnes et de 10 lignes, le numéro est donc codé en binaire, une ligne pour 1 numéro.
Je pense que je vais vous donner le code, ce sera plus compréhensible lol.
Je voudrait que le numéro s'affiche dans un tableau en dessus quand on remplie les cases, j'ai quasiment fini mais je suis bloquer...
J'aimerai aussi par la suite rentrer le numéro, et qu'en suite le tableau se remplie tout seule...
Voila le code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tableau</title>
<style type="text/css">
.blanc {
background: yellow;
}
.noir {
background: black;
}
</style>
<script type="text/javascript">
var setupEvents = function() {
var td = document.getElementById('tableau').getElementsByTagName('td');
for (var i = 0, length = td.length; i < length; i++) {
td[i].addEventListener("click", function() {changeStyle(this);}, false);
}
};
var changeStyle = function (obj) {
if (obj.className == "blanc") {obj.className = "noir"}
else {obj.className = "blanc"}
changeNumber(obj);
};
function changeNumber (obj) {
var td = obj.parentNode.getElementsByTagName('td');
var number = [0,0,0,0];
for (var i = 0, length = td.length; i < length; i++) {
if (td[i].className == "noir") {number[i] = 1;}
}
alert(number[0]*8+number[1]*4+number[2]*2+number[3]);
}
window.addEventListener('load',setupEvents);
var compte = (number[0]*8+number[1]*4+number[2]*2+number[3])
document.getElementById('Resultat').innerHTML = compte ;
</script>
</head>
<body>
<table border="5" cellpadding="25" id="tableau">
<tr>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
</tr>
<tr>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
</tr>
<tr>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
</tr>
<tr>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
</tr>
<tr>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
</tr>
<tr>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
</tr>
<tr>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
</tr>
<tr>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
<td class="blanc"></td>
</tr>
</table>

<table id="tableau" width="400px" height="400px" border="1" >
<tr>
<td id="Resultat"></td>
</tr>
</table>
</body>
</html>



Voila j'espère que vous pourrez m'aider
Merci :)

3 réponses

ryko1820 Messages postés 1645 Date d'inscription dimanche 28 avril 2013 Statut Membre Dernière intervention 15 août 2021 307
Modifié par ryko1820 le 25/05/2013 à 10:59
Hello,

en plus tu as posté dans Programmation/Java alors que cela aurait peut être été plus indiqué en Webmaster/Javascript. Ici tu risques d'avoir moins de chance de réponses.
0
KX Messages postés 16668 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 17 mars 2023 3 005
25 mai 2013 à 23:25
C'est bon, j'ai déplacé la discussion...
0
Utilisateur anonyme
25 mai 2013 à 23:58
Bonsoir,

je viens de regarder vite fait et je peux me tromper, mais moi je metterais ton tableau number à l'extérieur de ta fonction.

aussi et défois cela cause souci
var compte = (number[0]*8+number[1]*4+number[2]*2+number[3])


il manque le point virgule
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 430
Modifié par prosthetiks le 28/05/2013 à 02:38
Hello,

Je t'ai fais un script un peu à l'arrache (Une envie de dormir doit en être la cause ^^)

tu peux t'en inspirer pour te débloquer

<html>
	<head>
		<meta charset="utf-8"/>
		<style type="text/css">
			td{
				-webkit-transition: all linear .5s;
				-moz-transition: all linear .5s;
				-o-transition: all linear .5s;
				transition: all linear .5s;
				border:#333 solid 1px;
				display: block;
				width: 20px;
				height: 20px;	
				border-radius: 50px;
				box-shadow: inset 0 3px 2px #444;
				background-color: #bbb;
				opacity:.8;
				cursor: pointer;
			}
			td:hover{
				background-color: #eee;
				box-shadow: inset 0 0px 0px #444;
			}
			td.set{
				background-color: green;
				box-shadow: inset 0 0px 0px #444;
				opacity:1;
			}
		</style>
	</head>
	<body>
		<table id="numberTable">
		</table>
		<input type="text" placeholder="Nombre à 10 chiffres" id="number" />
		<button onclick="setNumber()">Gogo</button>
		<!--Script-->
		<script type="text/javascript">
			var numberLength = 10;
			function initTable(){
				var table = '';
				for(var i = 0; i < numberLength; i++){
					table += '<tr id="line'+i+'">';
					for(var j = 0; j < 4; j++){
						table += '<td></td>';
					}
					table += '</tr>';
				}
				document.getElementById('numberTable').innerHTML = table;
			}

			window.addEventListener('click', function(e){
				var unset = false;
				if(e.target.nodeName == 'TD'){
					if(e.target.getAttribute('class') == 'set'){
						e.target.className = '';
						unset = true;
					}
					if(!unset)
						e.target.setAttribute('class', 'set');
					var number = '';
					for(var i = 0; i < numberLength; i++){
						var tmpNumber = ''; 
						for(var j = 0; j < 4; j++){
							if(document.getElementById('line'+i).getElementsByTagName('td')[j].getAttribute('class') == 'set'){
								tmpNumber += 1;
							}else{
								tmpNumber += 0;
							}
						}
						number += parseInt(tmpNumber, 2);
					}
					document.getElementById('number').value = number;
				}
			});

			function setNumber(){
				initTable();
				var number = document.getElementById('number').value;
				if(number.length == numberLength && number % 1 === 0){
					for(var i = 0; i < numberLength; i++){
						var target = document.getElementById('line'+i);
						for(var j = 0; j < 4; j++){
							var digit = number.charAt(i);
							var binary = ((parseInt(digit)).toString(2));
							binary = ''+(leftPad(binary, 4));
							if( binary.charAt(j) == '1' )
								target.getElementsByTagName('td')[j].setAttribute('class', 'set');
						}
					}
				}else{
					alert('Veuillez entrer un nombre à ' + numberLength +' chiffres');
				}
			}
			function leftPad(number, targetLength) {
			    var output = number + '';
			    while (output.length < targetLength) {
			        output = '0' + output;
			    }
			    return output;
			}
			initTable();
		</script>
	</body>
</html>	
0