Question

我是Javascript和HTML的新手。

我正在尝试将其设置为在用户将某些信息输入到输入表单并单击提交按钮后，所述信息将显示在表单上方或下方的表格中。没有JQuery我怎么能这样做？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script>

document.getElementById("myBtn").onclick = myFunction;

function myFunction() {
var x = document.getElementById("fname");
everything.innerHTML = x.value + y.value + z.value;

}

</script>
</head>
<body>
<div class="everything">everything goes here

</div>
<p></p>

Enter your name: <input type="text" id="fname" >
<p></p>
Enter your age: <input type="number" id="fage" >
<p></p>
Enter your city: <input type="text" id="fcity" >
<p></p>
<button id="myBtn">Try it</button>



</body>
</html>

Answer 1

您的代码中存在一些问题。首先是因为您尝试访问目前不存在的元素。其次，你需要获得你的元素。

Wath demo

你有2个主要解决方案。 1.在关闭body标签之前加载脚本。因为dom将首先加载，所以您可以访问脚本中的所有dom元素。

angular.module('security', [])
.factory('securityCheck', ['$q', '$http', function ($q, $http) {
    var security = {
    checkLogin: function() {
        return $http.get('https://api.mongolab.com/api/1/databases/lagrossetete/collections/avengers?apiKey=j0PIJH2HbfakfRo1ELKkX0ShST6_F78A')
            .success(function(data, status, headers, config) {
                console.log('the call was a success!');
                return data;
            })
            .error(function(data, status, headers, config) {
                console.log('the call had an error.');
            });
    }
    };
    return security;
}]);

2.在内容加载后运行脚本。您将附加事件处理程序以加载事件，thah将在dom加载后运行。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="everything">everything goes here

</div>
<p></p>

Enter your name: <input type="text" id="fname" >
<p></p>
Enter your age: <input type="number" id="fage" >
<p></p>
Enter your city: <input type="text" id="fcity" >
<p></p>
<button id="myBtn">Try it</button>


<script>

document.getElementById("myBtn").onclick = myFunction;

function myFunction() {
var x = document.getElementById("fname");
var y = document.getElementById("fage");
var z = document.getElementById("fcity");
var everythingClass = document.getElementsByClassName('everything')[0];
everythingClass.innerHTML = x.value + y.value + z.value;

}

</script>
</body>
</html>

Answer 2

您通常希望将所有JS代码放在</body>标记之前。

此外，在您当前的代码中，y和z未定义，因此x.value + y.value + z.value;没有任何意义。

拥有var y = getElementById("fage"); var z = getElementById("fcity");

另外，你不能只用everything.innerHTML来引用“一切”类的div。要么只使用Id（就像你为其余部分所做的那样），要么按照以下方式进行：

var everything = document.getElementsByClassName("everything");
everything[0].innerHTML = x.value + y.value + z.value;

希望这会有所帮助：）

Javascript：在提交时将表单输入附加到表中

2 个答案:

Wath demo