js加html問(wèn)題：編寫一個(gè)將用戶輸入的信息輸出到控制臺(tái)的頁(yè)面。
問(wèn)題：利用js編寫一個(gè)將用戶輸入的信息輸出到控制臺(tái)的頁(yè)面。
1.html文本框輸入+JavaScript的賦值+js控制臺(tái)
第一個(gè)由up樂(lè)極smile工作室提供
<!DOCTYPE html>
<html lang="cn">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<form>
? ? <input id="input" type="text" >
</form>
<button onclick="btn()">測(cè)試</button>
<div id="html"></div>
<script>
? ? var x = document.getElementById("input");//獲取輸入框元素
? ? function btn()
? ? {
? ? console.log(x.value); //將輸入框的值賦給控制臺(tái)
? ? }
</script>
</body>
</html>
2.js彈出窗口輸入+js控制臺(tái)（最簡(jiǎn)單）
<!DOCTYPE html>
<html lang="cn">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<form>
? ? <input id="input" type="text" >
</form>
<button onclick="btn()">測(cè)試</button>
<div id="html"></div>
<script>
? ? var x = document.getElementById("input");//獲取輸入框元素
? ? function btn()
? ? {
? ? console.log(x.value); //將輸入框的值賦給控制臺(tái)
? ? }
</script>
</body>
</html>
3
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
? var x = document.forms["myForm"]["fname"].value;
? if (x == "") {
? ? alert("必須填寫內(nèi)容！");
? ? return false;
? }
? if (x !="")
? {console.log(x);
? return false;
}
}</script>
</head>
<body>
<h1>將用戶的內(nèi)容輸出到控制臺(tái)</h1>
<h4>你在內(nèi)容輸入框輸入內(nèi)容點(diǎn)提交控制臺(tái)就可以看到！</h4>
<form name="myForm" action="/demo/action_page.php" onsubmit="return validateForm()" method="post">
? 內(nèi)容：<input type="text" name="fname">
? <input type="submit" value="提交">
</form>
<p class="pull-right">Powered by < a href=" ">木槿</ a> | QQ1773511693</p >
</body>
</html>
