0

I am trying to simulate something like reddit where you can write a text and email and when you submit, they post in a "div". Somehow when I compiled it on stack overflows web compiler it console.logged the giving text but not as "p" inside a "div"

let submit = document.getElementById('submit');
let inputfield = document.getElementById('input-field');
let mail = document.getElementById('mail-field');
let posts = document.getElementsByClassName('post');

console.log(inputfield)

submit.addEventListener('click', function(){
    console.log(inputfield.value)
    var paragraph = document.createElement('p')
    paragraph.classList.add('paragraph-styling');
    paragraph.innerText = inputfield.value;
    posts.appendChild(paragraph);
    inputfield.value = "";
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Dom Manipulation</title>
</head>
<body>
    <script src="script.js"></script>

    <nav id="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    
    <h1>Welcome to This Page</h1>
    <div class = "inputs">
        <input id="mail-field" type="text" placeholder="Write your mail"> 

        <textarea id="input-field" placeholder="Write something"></textarea>

        <button id="submit">Submit</button>
    </div>

    <div class="post" style="width:50%; margin: 0 auto;">

    </div>

</body>
</html>
Turhan Ergene
  • 487
  • 1
  • 4
  • 13
  • 1
    `HTMLCollections` or `NodeLists` don’t have children; `Element`s have. `document.getElementsByClassName("post")` isn’t an `Element`; `document.querySelector(".post")` is. Read the [documentation](//developer.mozilla.org/docs/Web/API/Document#methods) at MDN. – Sebastian Simon Sep 11 '21 at 22:16
  • Just done that but still not working – Turhan Ergene Sep 11 '21 at 22:43
  • “Not working” how? Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Does your JS code not have a `DOMContentLoaded` or `load` listener? See [Why does jQuery or a DOM method such as `getElementById` not find the element?](/q/14028959/4642212). – Sebastian Simon Sep 11 '21 at 23:03

1 Answers1

0

getElementsByClassName will return an array-like like objects which has post class. So you have to get elements from that array-like objects. You can use index here as

posts[0].appendChild( paragraph );


let submit = document.getElementById('submit');
let inputfield = document.getElementById('input-field');
let mail = document.getElementById('mail-field');
let posts = document.getElementsByClassName('post');


submit.addEventListener('click', function() {
  var paragraph = document.createElement('p')
  paragraph.classList.add('paragraph-styling');
  paragraph.innerText = inputfield.value;
  posts[0].appendChild(paragraph);
  inputfield.value = "";
})
<nav id="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<h1>Welcome to This Page</h1>
<div class="inputs">
  <input id="mail-field" type="text" placeholder="Write your mail">

  <textarea id="input-field" placeholder="Write something"></textarea>

  <button id="submit">Submit</button>
</div>

<div class="post" style="width:50%; margin: 0 auto;">

</div>
DecPK
  • 24,537
  • 6
  • 26
  • 42
  • `let submit = document.getElementById('.submit'); let inputfield = document.getElementById('.input-field'); let mail = document.getElementById('.mail-field'); let posts = document.querySelector('.post'); console.log(inputfield) submit.addEventListener('click', function(){ console.log(inputfield.value) var paragraph = document.createElement('p') paragraph.classList.add('paragraph-styling'); paragraph.innerText = inputfield.value; posts[0].appendChild(paragraph); inputfield.value = ""; })` yet still not working – Turhan Ergene Sep 11 '21 at 22:44
  • when you use `querySelector` there is no need to use `posts[0]`. Because `querySelector` returns a single elemenet not array-like structure. Just use `posts`. – DecPK Sep 11 '21 at 22:49