Javascript appended code comes as undefined-CodePudding

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 >
    <h4>Output</h4>
    <div id="output" >
    </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.

CodePudding user response：

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.

E.g.

<!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 >
    <h4>Output</h4>
    <div id="output" >
    </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.

CodePudding user response：

<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>

CodePudding user response：

Ok, so submissions is not a input element and so it does not have the value method.

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.

Edit: I did not realize your clicks counter was initially let clicks = 1; and not let clicks = 0;. The rearranging in the below JS will only work if clicks is initially set to 0.

I would generally advise to use let clicks = 0; because it makes more sense to potentially yourself and another person reading your code. If you think about it - when you make your counter (clicks), there have not been any clicks yet and so it would make more sense to have it initially set to 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));
}