Différence entre onclick et click?

**LuluHow** · 05/06/2015, 17h57

Bonsoir à tous!

Je suis en train de créer un éditeur wysiwyg, et mon code fonctionne mal. Pour une raison qui m'est inconnue, lorsque j'appelle ma fonction insertTag() depuis un onclick dans le HTML, tout va bien. A l'inverse, quand l'appel passe via la méthode .click(), rien ne va.
Auriez vous des idées?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>WYSIWYG</title>
</script>
</head>
<body>
<div id="main">
	<div>
		<p>
			<input type="button" value="G" id="gras"></input>
			<input type="button" value="I" onclick="insertTag('&lt;italique&gt;', '&lt;/italique&gt;', 'textarea')" />
		</p>	
	</div>	
	<textarea id="textarea" cols="150" rows="10"></textarea>
	<div id="previewDiv"></div>
</div>
<script src="jQuery.js"></script>
<script src="wysiwyg.js"></script>
</body>
</html>

Code javascript :

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
 
	$(document).ready(function () {
		$("#gras").on("click", function() {
			insertTag("&lt;gras&gt;, &lt;/gras&gt;, textarea");
		});
	});
	function insertTag(startTag, endTag, textareaId, tagType) {
		var field = document.getElementById(textareaId);
		var scroll = field.scrollTop;
		field.focus();
		var startSelection   = field.value.substring(0, field.selectionStart);
		var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
		var endSelection     = field.value.substring(field.selectionEnd);
		field.value = startSelection + startTag + currentSelection + endTag + endSelection;
		field.focus();
		field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
	}  	
 
	function preview(textareaId) {
		var field = textareaId.value;
		field = field.replace(/&/g, '&amp;');
		field = field.replace(/</g, '&lt;').replace(/>/g, '&gt;');
		field = field.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');	
		field = field.replace(/&lt;gras&gt;([\s\S]*?)&lt;\/gras&gt;/g, '<strong>$1</strong>');
		field = field.replace(/&lt;italique&gt;([\s\S]*?)&lt;\/italique&gt;/g, '<em>$1</em>');
		document.getElementById("previewDiv").innerHTML = field;
		console.log(field);
	}
 
	var area = document.getElementById("textarea");
	preview(area);

Merci d'avance!

**Bovino** · 09/06/2015, 08h59

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

insertTag("&lt;gras&gt;, &lt;/gras&gt;, textarea");

Avec cette syntaxe, tu ne passes qu'un seul paramètre à une fonction qui en attend 4...
Il t'aurais suffit de regarder la console du navigateur pour t'en rendre compte.

Différence entre onclick et click?

JavaScript

Discussions similaires

Partager

Partager