Javascript附加的代码是未定义的

我有这样的代码，我从表单中获取提交并将其附加到HTML中。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}

div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}

input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}

input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>

<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>

<p>Submission Number: <a id="clicks">1</a>
<div class="output-area">
<h4>Output</h4>
<div id="output" class="inner">
</div>
</div>
<span></span>
</body>
<script>
var clicks = 1;
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');

let data = [ 
`<p>Name: ${name.value}</p>`, 
`<p>Age: ${age.value}</p>`, 
`<p>Email: ${email.value}</p>`,  
`<p>Country: ${country.value}</p>`,  
`<p>Message: ${msg.value}</p>`,  
`<p>Submission No: ${submissions.value}</p>`];


$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}

</script>
</html>

在这段代码中，我想打印用户当前提交的编号。所以我做了一个点击计数器。

clicks += 1;
document.getElementById("clicks").innerHTML = clicks;

然后我试着把它放进一个常数中，并把它附加上去

const submissions = document.getElementById('clicks');

但我在这里面临的问题是，当附加我的提交字段时，它显示为Submission No: undefined。任何帮助都将不胜感激。

您的submissions元素是锚点(<a>(元素。这些HTML元素没有value字段。

您可以通过innerHTML以与编写值相同的方式读取该值。

例如

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}

div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}

input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}

input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>

<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>

<p>Submission Number: <a id="clicks">1</a>
<div class="output-area">
<h4>Output</h4>
<div id="output" class="inner">
</div>
</div>
<span></span>
</body>
<script>
var clicks = 1;
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');

let data = [ 
`<p>Name: ${name.value}</p>`, 
`<p>Age: ${age.value}</p>`, 
`<p>Email: ${email.value}</p>`,  
`<p>Country: ${country.value}</p>`,  
`<p>Message: ${msg.value}</p>`,  
`<p>Submission No: ${submissions.innerHTML}</p>`]; // Use innerHTML here


$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}

</script>
</html>

通常，您当然也可以直接插入clicks变量(而不是a元素的内容(。

注意将用户输入呈现到HTML中是非常不安全的。它为恶意用户创建了各种各样的漏洞，所以不要在生产中这样做。

<a>标记没有value属性。您必须使用textContent或innerText才能获得计数。

console.log(document.getElementById('clicks').textContent);

<a id="clicks">2</a>

好的，所以submissions不是输入元素，所以它没有value方法。

不使用submissions.value，而使用submissions.innerHTML。

此外，重新排列最后几行，以确保在输出所有数据之前更新点击计数器。

编辑：我没有意识到你的点击计数器最初是let clicks = 1;，而不是let clicks = 0;。只有当clicks最初设置为0时，以下JS中的重新排列才会起作用

我通常建议使用let clicks = 0;，因为它对您自己和其他阅读代码的人更有意义。如果你仔细想想，当你制作计数器(clicks(时，还没有任何点击，所以最初将其设置为0会更有意义

let clicks = 0;
const writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
// ++ is same thing as += 1
clicks++;
submissions.innerHTML = clicks;
let data = [ 
`<p>Name: ${name.value}</p>`, 
`<p>Age: ${age.value}</p>`, 
`<p>Email: ${email.value}</p>`,  
`<p>Country: ${country.value}</p>`,  
`<p>Message: ${msg.value}</p>`,  
`<p>Submission No: ${submissions.innerHTML}</p>`
];


$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
}

相关内容

最新更新

热门标签：