Getting text from a forms input. Javascript

Do small Changes in your code ,

<script>
    function myFunction() {
        document.getElementById("demo").value = document.getElementById("emailIn").value;
    }

The problem is that you are just trying to get the data with text (which isn't declared anywhere) instead of the value of the input.

You could have had the line be:

var text = document.getElementById("emailIn").value;

And then your code would have worked, but since you are only going to use that information just one time, making a variable for storage of the data doesn't make good sense. Instead, you can just get the value and assign it all in one line.

Also, don't use inline HTML event attributes (onclick). Keep all your JavaScript completely separate from your HTML and use modern standards for setting up event handlers. Here's why.

Lastly, .innerHTML causes the string of data you provide to be parsed by the HTML parser. Since the value you are working with won't contain any HTML, it's better to use .textContent, which doesn't process the string as HTML. It's a bit better on performance to use the appropriate one.

// Get reference to the submit button
var btn = document.querySelector(".signupbtn");

// Modern DOM standard for setting up event listeners
btn.addEventListener("click", myFunction);

function myFunction() {  
   // Use textContent instead of innerHTML when there won't be any HTML
   document.getElementById("demo").textContent = document.getElementById("emailIn").value;
 }

<form class="modal-content" action="#" style="margin-top:10%;">
   <div class="container">
     <label><b>Email</b></label>
     <input id="emailIn" type="email" placeholder=" [email protected]" name="email" required>
     <br/><br/> 
   <div class="clearfix">
     <button type="submit" class="signupbtn">Sign Up</button>
    </div>
   </div>
 </form>

 <p id="demo"></p>

you almost had it! just define text in your function

function myFunction() {
    text=document.getElementById("emailIn").value
   document.getElementById("demo").innerHTML = text;
 }

<form class="modal-content" action="#" style="margin-top:10%;">
   <div class="container">
     <label><b>Email</b></label>
     <input id="emailIn" type="email" placeholder=" [email protected]" name="email" required>
     <br/><br/> 
   <div class="clearfix">
     <button type="submit" onclick="myFunction()" class="signupbtn">Sign Up</button>
    </div>
   </div>
 </form>

 <p id="demo">xxxx</p>

 

I do things like this thusly:

<form class="modal-content" action="#" style="margin-top:10%;">
 <div class="container">
  <label><b>Email</b></label>
   <input id="emailIn" type="email" placeholder=" [email protected]" name="email" required>
  <br/><br/>
  <div class="clearfix">
    <button type="submit" class="signupbtn" id="button">Sign Up</button>
  </div>
  </div>
 </form>

<p id="demo"></p>

<script>
   var button = document.getElementById('button');
   var input = document.getElementById('emailIn');

   button.addEventListener('click', function(){
    var addToP = input.value;
    document.getElementById('demo').innerHTML = demo.innerHTML + '<p>' + addToP + '</p>';
    input.value = '';
  })
</script>