Entering input text in div, but not swapping old one

Question

I have homework and this task keeps making me problems, I'm still noob in JavaScript, and if I ask stupid questions I'm sorry... I have input fields and when i submit them they should appear in div below them and it's working fine for me, after that I need to submit another time with different values, but not changing old one, new ones should be on top of old ones, like whole div on top of old div if u understand what I mean by that... that part I just can't get to work, to be honest I have no idea how should I do that... I know it would be easier with jQuery but condition is not to use it Here is my code (every help is appreciated, ty very much!):

function validate() {
  var title = document.getElementById('news-title').value;
  var errortitle = '';
  var error = 0;
  title = title.trim();
  if (title.length === 0) {
    errortitle += 'Title is required. <br>';
    error++;
  }
  if (title.length < 3 || title.length > 50) {
    errortitle += 'Title must be between 3 and 50 characters.';
    error++;
  }

  if (error === 0) {
    document.getElementById('error-title').innerText = '';
    document.getElementById('news-title').style.borderColor = "black";


  } else {
    document.getElementById('error-title').innerHTML = errortitle;
    document.getElementById('news-title').style.borderColor = "red";
  }
  //title end
  //news start
  var news = document.getElementById('news-text').value;
  var errornews = '';
  var greska = 0;


  news = news.trim();
  if (news.length === 0) {
    errornews += 'News text is required. <br>';
    greska++;
  }
  if (news.length < 10 || title.length > 250) {
    errornews += 'News text must be between 10 and 250 characters.';
    greska++;
  }
  if (greska === 0) {
    document.getElementById('error-text').innerText = '';
    document.getElementById('news-text').style.borderColor = "black";


  } else {
    document.getElementById('error-text').innerHTML = errornews;
    document.getElementById('news-text').style.borderColor = "red";
  }
  //news end
  //link start
  var url = document.getElementById('news-link').value;
  var errorlink = '';
  var greskalink = 0;
  url = url.trim();



  if (url.length === 0) {
    errorlink += 'News link is required. <br>';
    greskalink++;
  }
  if (url.length < 10 || url.length > 250) {
    errorlink += 'News link must have at least  10 characters. <br>';
    greskalink++;
  }
  if (url.search("http") > 0) {
    errorlink += 'News link must start with https://';
    greskalink++;
  }
  if (greskalink === 0) {
    document.getElementById('error-link').innerText = '';
    document.getElementById('news-link').style.borderColor = "black";

  } else {
    document.getElementById('error-link').innerHTML = errorlink;
    document.getElementById('news-link').style.borderColor = "red";
  }
  //link ends
  //author starts       
  var author = document.getElementById('news-author').value;
  var errorauthor = '';
  var greskaAuthor = 0;
  author = author.trim();



  if (author.length === 0) {
    greskaAuthor;
  } else if (author.length < 3 || author.length > 20) {
    errorauthor += 'Author (if entered) must have between 3 and 20 characters.';
    greskaAuthor++;
  }

  if (greskaAuthor === 0) {
    document.getElementById('error-author').innerText = '';
    document.getElementById('news-author').style.borderColor = "black";

  } else {
    document.getElementById('error-author').innerHTML = errorauthor;
    document.getElementById('news-author').style.borderColor = "red";
  }
  //author ends
  var email = document.getElementById('email').value;
  var errormail = '';
  var greskamail = 0;
  email = email.trim();

  if (email.length === 0) {
    errormail += 'Email is required. \n';
    greskamail++;
  }

  if (email.length < 5) {
    errormail += 'Email must have at least 5 characters.\n';
    greskamail++;
  }

  if (email.search('@') < 2) {
    errormail += "Please enter valid email.";
    greskamail++;
  }

  if (greskamail === 0) {
    document.getElementById('error-email').innerText = '';
    document.getElementById('email').style.borderColor = "black";

  } else {
    document.getElementById('error-email').innerText = errormail;
    document.getElementById('email').style.borderColor = "red";
  }


  if (greskamail > 0 || greskaAuthor > 0 || greskalink > 0 || greska > 0 || error > 0) {
    document.getElementById('content').innerHTML = '';
  } else {
    document.getElementById('email-autora').innerHTML = email;
    document.getElementById('opis-vesti').innerHTML = news;
    document.getElementById('autor').innerHTML = author;
    document.getElementById('link-do-vesti').href = url;
    document.getElementById('link-do-vesti').innerHTML = url;
    document.getElementById('naslov').innerHTML = title;
  }
}

<div class="container clearfix">

  <label>News title</label><br>
  <input type="text" name="news-title" value="" id="news-title">
  <p id="error-title" style='color: red;'></p>

  <label>News text</label><br>
  <textarea name="news-text" rows="8" cols="80" id="news-text"></textarea>
  <p id="error-text" style='color: red;'></p>

  <label>News link</label><br>
  <input type="text" name="news-link" value="" id="news-link">
  <p id="error-link" style='color: red;'></p>



  <label>Author</label><br>
  <input type="text" name="news-author" value="" id="news-author">
  <p id="error-author" style='color: red;'></p>

  <label>Author Email</label><br>
  <input type="text" name="email" value="" id="email">
  <p id="error-email" style='color: red;'></p>



  <button id="enter" onclick="validate()">Display</button>


  <div id="content">
    <h1 id="naslov"></h1>
    <p id="opis-vesti"></p>
    <a href="" id="link-do-vesti"></a>
    <p id='email-autora'></p>
    <h4 id='autor'></h4>
    <hr>
  </div>
</div>

Right now you are just setting the value of the same element over and over. You need to create new div for each entry. This should help you get started: https://stackoverflow.com/questions/14094697/how-to-create-new-div-dynamically-change-it-move-it-modify-it-in-every-way-po — Josh Adams, Jun 18 '18 at 20:03

Joseph Webber · Accepted Answer · 2018-06-18T21:49:25.680

The problem here is that even if you were to copy and paste the DOM elements inside content with new values, you would have multiple DOM elements with the same ID which is not allowed (if you did getElementById, how would it know wich one?).

One solution is to remove the DOM elements inside content and instead create them inside your validate function as a string, then set content.innerHTML to the string, plus whatever content.innerHTML already is.

var content = document.getElementById('content');
var newContent = '';
newContent += '<h1>' + title + '</h1>';
newContent += '<p>' + news + '</p>';
newContent += '<a href="' + url + '">' + url + '</a>';
newContent += '<p>' + email + '</p>';
newContent += '<h4>' + author + '</h4>';
newContent += '<hr>';
content.innerHTML = newContent + content.innerHTML;

This way is unsafe though since HTML entered in the inputs will be rendered by the DOM. A simple way around this is to replace all &, <, > and " in the strings with their character reference (&, <, &rt; and " respectively). Since you will need to do this for each input's value, it will be best to use a function.
(function is from this answer)

function htmlEntities(str) {
  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

You can then do htmlEntities(title), and the same for the others.

function validate() {
  var title = document.getElementById('news-title').value;
  var errortitle = '';
  var error = 0;
  title = title.trim();
  if (title.length === 0) {
    errortitle += 'Title is required. <br>';
    error++;
  }
  if (title.length < 3 || title.length > 50) {
    errortitle += 'Title must be between 3 and 50 characters.';
    error++;
  }

  if (error === 0) {
    document.getElementById('error-title').innerText = '';
    document.getElementById('news-title').style.borderColor = "black";


  } else {
    document.getElementById('error-title').innerHTML = errortitle;
    document.getElementById('news-title').style.borderColor = "red";
  }
  //title end
  //news start
  var news = document.getElementById('news-text').value;
  var errornews = '';
  var greska = 0;


  news = news.trim();
  if (news.length === 0) {
    errornews += 'News text is required. <br>';
    greska++;
  }
  if (news.length < 10 || title.length > 250) {
    errornews += 'News text must be between 10 and 250 characters.';
    greska++;
  }
  if (greska === 0) {
    document.getElementById('error-text').innerText = '';
    document.getElementById('news-text').style.borderColor = "black";


  } else {
    document.getElementById('error-text').innerHTML = errornews;
    document.getElementById('news-text').style.borderColor = "red";
  }
  //news end
  //link start
  var url = document.getElementById('news-link').value;
  var errorlink = '';
  var greskalink = 0;
  url = url.trim();



  if (url.length === 0) {
    errorlink += 'News link is required. <br>';
    greskalink++;
  }
  if (url.length < 10 || url.length > 250) {
    errorlink += 'News link must have at least  10 characters. <br>';
    greskalink++;
  }
  if (url.search("http") > 0) {
    errorlink += 'News link must start with https://';
    greskalink++;
  }
  if (greskalink === 0) {
    document.getElementById('error-link').innerText = '';
    document.getElementById('news-link').style.borderColor = "black";

  } else {
    document.getElementById('error-link').innerHTML = errorlink;
    document.getElementById('news-link').style.borderColor = "red";
  }
  //link ends
  //author starts       
  var author = document.getElementById('news-author').value;
  var errorauthor = '';
  var greskaAuthor = 0;
  author = author.trim();



  if (author.length === 0) {
    greskaAuthor;
  } else if (author.length < 3 || author.length > 20) {
    errorauthor += 'Author (if entered) must have between 3 and 20 characters.';
    greskaAuthor++;
  }

  if (greskaAuthor === 0) {
    document.getElementById('error-author').innerText = '';
    document.getElementById('news-author').style.borderColor = "black";

  } else {
    document.getElementById('error-author').innerHTML = errorauthor;
    document.getElementById('news-author').style.borderColor = "red";
  }
  //author ends
  var email = document.getElementById('email').value;
  var errormail = '';
  var greskamail = 0;
  email = email.trim();

  if (email.length === 0) {
    errormail += 'Email is required. \n';
    greskamail++;
  }

  if (email.length < 5) {
    errormail += 'Email must have at least 5 characters.\n';
    greskamail++;
  }

  if (email.search('@') < 2) {
    errormail += "Please enter valid email.";
    greskamail++;
  }

  if (greskamail === 0) {
    document.getElementById('error-email').innerText = '';
    document.getElementById('email').style.borderColor = "black";

  } else {
    document.getElementById('error-email').innerText = errormail;
    document.getElementById('email').style.borderColor = "red";
  }


  if (greskamail > 0 || greskaAuthor > 0 || greskalink > 0 || greska > 0 || error > 0) {
    document.getElementById('content').innerHTML = '';
  } else {
    var content = document.getElementById('content');
    var newInner = '';
    newInner += '<h1>' + htmlEntities(title) + '</h1>';
    newInner += '<p>' + htmlEntities(news) + '</p>';
    newInner += '<a href="' + htmlEntities(url) + '">' + htmlEntities(url) + '</a>';
    newInner += '<p>' + htmlEntities(email) + '</p>';
    newInner += '<h4>' + htmlEntities(author) + '</h4>';
    newInner += '<hr>';
    content.innerHTML = newInner + content.innerHTML;
  }
}

function htmlEntities(str) {
  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

<div class="container clearfix">

  <label>News title</label><br>
  <input type="text" name="news-title" value="" id="news-title">
  <p id="error-title" style='color: red;'></p>

  <label>News text</label><br>
  <textarea name="news-text" rows="8" cols="80" id="news-text"></textarea>
  <p id="error-text" style='color: red;'></p>

  <label>News link</label><br>
  <input type="text" name="news-link" value="" id="news-link">
  <p id="error-link" style='color: red;'></p>



  <label>Author</label><br>
  <input type="text" name="news-author" value="" id="news-author">
  <p id="error-author" style='color: red;'></p>

  <label>Author Email</label><br>
  <input type="text" name="email" value="" id="email">
  <p id="error-email" style='color: red;'></p>



  <button id="enter" onclick="validate()">Display</button>


  <div id="content"></div>

</div>

Entering input text in div, but not swapping old one

1 Answers1