Javascript appended code comes as undefined
Question
I have this code where I take the submissions from a form and append it to a 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>
In this code, I wanted to print the users' current submission number. So I made a click counter.
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
And then I tried to put it into a constant and append it.
const submissions = document.getElementById('clicks');
But issue I'm facing here is, when appended my submission field comes out as Submission No: undefined . Any help would be much appreciated.
3 answers
solution1
3 2021-12-18 21:47:23
<a> tags don't have a value attribute. You'll have to use textContent or innerText to get the count.
console.log(document.getElementById('clicks').textContent);
<a id="clicks">2</a>
solution2
3 ACCPTED 2021-12-18 21:51:08
Your submissions element is an anchor ( <a> ) element. These HTML elements do not have a value field.
You can read the value the same way you are writing it, via innerHTML .
Eg
<: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>
Generally you could of course also insert the clicks variable directly (instead of the contents of the a element).
Note It is highly insecure to render user-input into your HTML. It creates all sorts of vulnerabilities for malicious users so DON'T do this in production.
solution3
1 2021-12-18 22:01:21
sorry I have too low of a reputation to comment so I'll say it here.
submissions is not a input element and so it does not have the method value .
Instead of using submissions.value use submissions.innerHTML .
Also, rearrange the last few lines to make sure the clicks counter is updated before outputting all the data.
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));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.