如何显示JavaScript的变量

如何显示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://*.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); 
+1

参考:'语法错误:预期的表现,得到了 ')'' –

+0

谢谢!新的JavaScript,所以我完全忘了控制台。 – Bodhidharma482