bonjour,
j'essaie de créer une boite de texte avec des boutons pour changer la mise en forme du texte

html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html5>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
	<head>
    <meta http-equiv="content-type"	charset="UTF-8" content="text/html">
    <title>MESSAGE</title>
    <link href="css/styles/reset.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/styles/page.css">
	  <link rel="shortcut icon" type="image/png"  href="favicon.png" />
	  <meta name="viewport" content="width=device-width">
		<!--[if lt IE 9]>
	    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
    	<section>
    	<nav>
    		<button id="maj"><img src="img/btn/uppercase.jpg" width="45" height="45" alt=""></button>
    		<button id="min"><img src="img/btn/minuscule.jpg" width="45" height="45" alt=""></button>
    		<button id="b"><img src="img/btn/bold.jpg" width="45" height="45" alt=""></button>
    		<button id="u"><img src="img/btn/underliined.jpg" width="45" height="45" alt=""></button>
    		<button id="i"><img src="img/btn/iitalic.jpg" width="45" height="45" alt=""></button>
    		<button id="pmaj"><img src="img/btn/smallcaps.jpg" width="45" height="45" alt=""></button>
    		<button id="r"><img src="img/btn/red.jpg" width="45" height="45" alt=""></button>
    		<button id="l_t"><img src="img/btn/line_through.jpg" width="45" height="45" alt=""></button>
    	</nav>
    	<form>
		<textarea id="t" rows="15" cols="70"></textarea>    	
    	</form>
    	</section>
		<script type="text/javascript" src="js/script.js"></script>
	</body>
</html>

js:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var text_sel;
 
    function addEvent(element, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
        if (element.attachEvent) {
            element.attachEvent ('on' + event, func);
        } 
        else {
            element.addEventListener (event, func, false);
        }
    };
 
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
} 
 
var t = document.getElementById('t');
addEvent (t, 'select', function () {
     text_sel = getSelected();
     var ts = text_sel.style;
     var maj = document.gettElementById('maj');
     addEvent (maj, 'click', function () {
         ts.textTransform = 'uppercase';
     });
     var min = document.gettElementById('min');
     addEvent (min, 'click', function () {
         ts.textTransform = 'lowercase';
     });
     var pmaj = document.gettElementById('pmaj');
     addEvent (pmaj, 'click', function () {
         ts.fontVariant = 'smalllcaps';
     });
     var b = document.gettElementById('b');
     addEvent (b, 'click', function () {
         ts.fontWeight = 'bold';  
     });
     var u = document.gettElementById('u');
     addEvent (u, 'click', function () {
         ts.textDecoration = 'underline':
     });
     var i = document.gettElementById('i');
     addEvent (i, 'click', function () {
         ts.fontStyle = 'italic';
     });
     var r = document.gettElementById('r');
     addEvent (r, 'click', function () {
         ts.color = 'red';
     });
     var l_t = document.gettElementById('l_t');
     addEvent (l_t, 'click', function () {
         ts.textDecoration = 'line-through';
     });
});