如何显示JavaScript的变量
问题描述:
我已经看过了相关网站(How to display javascript variables in a html page without document.write)如何显示JavaScript的变量
上,但在我自己的编码程序执行时,它不工作。希望你能帮忙!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}
</style>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
<script>
//https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event)){
$jsValue.innerHTML = $jsName.value;
}, false);
</script>
</body>
</html>
答
因为你有语法错误..检查控制台。
正确的代码应该是:
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);
参考:'语法错误:预期的表现,得到了 ')'' –
谢谢!新的JavaScript,所以我完全忘了控制台。 – Bodhidharma482