CODEWITHSUNDEEP
javascript
RAY
RAY

Reputation: 17

how to show user input in the body when a button is clicked

I'm trying to display a user input on a separate div, but only have it appear when a button is clicked. I think i have it set up but I'm just not sure how to display the input. can someone help me with how it can be done? 

<script>
    var callButt = document.getElementById("callButt");
    var userinput = document.getElementById("userinput");

    callButt.addEventListener("click", function(){
    console.log("Call has been set");

    userinput.style.display = "block";

</script>
<input id="callerIDInput" type="text" value="" >
<div id="userinput"> </div>

<button id='callButt'>CALL</button>

Upvotes: 0

Views: 235

Answers (2)

Archana Parmar
Archana Parmar

Reputation: 578

Use innerHTML of the DIV to set the value.

HTML

<input id="callerIDInput" type="text" value="">
<div id="userinput"> </div>

<button id='callButt' onclick="Display()">CALL</button>

Javascript

function Display()
{
    var callButt = document.getElementById("callButt");
    var userinput = document.getElementById("userinput");
    var callerIDInput = document.getElementById("callerIDInput");
    console.log("Call has been set");
    userinput.style.display = "block";
    userinput.innerHTML = callerIDInput.value;
}

Upvotes: 1

prasanth
prasanth

Reputation: 22510

Set the input value to the innerHTML of the div

var callButt = document.getElementById("callButt");
var userinput = document.getElementById("userinput");
callButt.addEventListener("click", function() {
      console.log("Call has been set");
      userinput.innerHTML = document.getElementById('callerIDInput').value
      })
<input id="callerIDInput" type="text" value="">
<div id="userinput"> </div>

<button id='callButt'>CALL</button>

Upvotes: 2

Related Questions