JS funcao script externo

Front-end JavaScript
#1

Estou recebendo o erro de que a função cut não tá definida. Estou linkando alguma coisa errada? Qual a forma certa de chamar a função do .js externo no onclick?

Obs.: os arquivos tão na mesma pasta!

JS: (cutString.js)

$(document).ready(function(){
	function cut(str, n){
		if(str.length <= n){
			$('chopped').append('<p>ERROR - wtf³? </p>');
			console.log('deu ruim');
		}
		var chop = "";
		chop = str.slice(0, -n);	
		console.log(chop);
		$('chopped').append('<p>' + chop + '</p>');
	}
});

HTML:

<!DOCTYPE html>
<html> 
<head>
	<title>Testes</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="cutString.js"></script>
</head>
<body> 
Entre com string: <input type="text" id="str"><br>
Qt. de chars pra cortar: <input type="text" id="n">
<input type="button" value="Me corta!" onclick="cut(document.getElementById('str').value, document.getElementById('n').value);">
<div id="chopped"></div>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</body> 
</html>
#2

O problema é que a função cut está definida no escopo da função anônima usada pelo ready. Ou seja, ela é visível dentro dessa função (a anônima) apenas. Para torná-la visível no onclick, coloque-a para fora do ready:

$(document).ready(function(){
	
});

function cut(str, n){
	if(str.length <= n){
		$('chopped').append('<p>ERROR - wtf³? </p>');
		console.log('deu ruim');
	}
	var chop = "";
	chop = str.slice(0, -n);	
	console.log(chop);
	$('chopped').append('<p>' + chop + '</p>');
}

Faria sentido usar o ready caso vc fosse fazer o bind do onclick por ele, veja:

HTML

<!DOCTYPE html>
<html> 

<head>
	<title>Testes</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="js.js"></script>
</head>

<body> 
	Entre com string: <input type="text" id="str"><br>
	Qt. de chars pra cortar: <input type="text" id="n">
	
	<input type="button" id="cutButton" value="Me corta!">
	
	<div id="chopped"></div>
	
	<script
		src="https://code.jquery.com/jquery-3.2.1.min.js"
		integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
		crossorigin="anonymous">
	</script>
</body>

</html>

JS

$(document).ready(function(){
	$('#cutButton').bind('click', cut);
});

function cut(){
	var str = document.getElementById('str').value;
	var n = document.getElementById('n').value;
	
	if(str.length <= n){
		$('chopped').append('<p>ERROR - wtf³? </p>');
		console.log('deu ruim');
	}
	var chop = "";
	chop = str.slice(0, -n);	
	console.log(chop);
	$('chopped').append('<p>' + chop + '</p>');
}
1 curtida
#3

Então, eu refiz das dessas duas formas, mas nenhum dos appends funciona. A saída do console.log está ok, mas é como se os appends não existissem.

<!DOCTYPE html>
<html> 
<head>
	<title>Testes</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="cutString.js"></script>
</head>
<body> 
Entre com string: <input type="text" id="str"><br>
Qt. de chars pra cortar: <input type="text" id="n">
<input type="button" value="Me corta!" id="cutButton">
<div id="chopped"></div>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</body> 
</html>

JS:

$(document).ready(function(){
	$('#cutButton').bind('click', cut);
});

function cut(){
		var str = document.getElementById('str').value;
		var n = document.getElementById('n').value;
		if(str.length <= n){
			$('chopped').append('<p>ERRO</p>');
			console.log('deu ruim');
		}
		var chop = "";
		chop = str.slice(0, -n);	
		console.log(chop);
		$('chopped').append('<p>' + chop + '</p>');
}
#4

O que está faltando é que vc colocou “chopped”, ao invés de #chopped. No primeiro caso, a jQuery esta procurando um elemento chamado e não uma div com id=“chopped”, que é o que você quer :wink:

2 curtidas