В первый раз, когда я пытаюсь использовать свои уроки jQuery на реальной веб-странице, я обнаружил, что переменная guess
(внутри области этой внутренней функции) исчезает, как только функция завершается.
Это, по-моему, нормальное поведение JavaScript, но как обычно можно захватить переменную, чтобы можно было использовать ее в других функциях? Мои уроки никогда не охватывали это.
Я предположил, что, как только guess
была направлена внутрь innerHTML #display
, он будет придерживаться. Но он даже исчезает оттуда.
?
<!DOCTYPE html>
<html>
<HEAD>
<title>Game of the Century</title>
<meta charset="UTF-8">
<LINK href="reset.css" rel="stylesheet" type="text/css">
<LINK href="main.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="application.js"></script>
</HEAD>
<body>
<form>
<input type='text' name = "input" id = "input"><br>
<input type='submit' id="submit">
</form>
<p id = "display"></p>
<div>
<img src="http://img707.imageshack.us/img707/2403/rj1a.jpg" alt = "ad">
</div>
</body>
</html>
...
$(document).ready(function () {
$('#submit').click( function() {
var guess = $('#input').val();
$("#display").html(guess);
});
});
Это абсолютно нормально и не связано с jQuery. Ваша переменная guess
определяется в закрытии, анонимной функции. Таким образом, он живет там, и он недоступен вне этой области. Если вы хотите использовать guess
вне обработчика кликов, просто определите его снаружи. Например:
$(document).ready(function () {
var guess;
$('#submit').click( function() {
guess = $('#input').val();
$("#display").html(guess);
});
var anotherMethod = function() {
alert(guess); // <--- it works
}
});
Кроме того, вам не нужно использовать document.getElementById
если вы уже включили jQuery.
Изменение: я только что видел html. Существует еще один побочный эффект кода. Ваша форма фактически отправляется, когда вы нажимаете кнопку. Попробуйте изменить type="submit"
на "type="button"
или каким-либо другим способом предотвратить отправку формы.
Просто здесь мое решение, возможно, лучшее разделение задач чтения/записи
$(document).ready(function () {
getMyHtml = function() {
return $('#input').val();
}
setMyHtml = function () {
var s = getMyHtml();
$("#display").html(s);
}
$('#submit').click(setMyHtml);
});