Input into a text area

Question

I need to find an easy way to get input from some <input>:

<p class="mono-header pt-1">Nicknames & Names</p>

    <div class="form-floating">
        <input type="text" class="form-control bg-dark text-white" name="nickname" placeholder="Nickname" id="nickname" minlength="1" maxlength="32" required>
        <label for="floatingInputValue">Nickname</label>
    </div>

<section class="p-1"></section>

    <div class="form-floating">
        <input type="text" class="form-control bg-dark text-white" name="username" placeholder="Username with Identifier" id="username" minlength="2" maxlength="37" required>
        <label for="floatingInputValue">Username with Identifier</label>
    </div>

<hr width="100%">

<p class="mono-header pt-1">About Me</p>

    <div class="form-floating">
        <textarea class="form-control bg-dark text-white aboutmetextarea" placeholder="About me" name="aboutme" id="aboutme" maxlength="190" required></textarea>
        <label for="floatingTextarea2">About Me</label>
    </div>

into a larger text (on the location of the ----------):

<div class="nickname-name">
    <p class ="fakeginto prewrap" style="font-size: 20px; color: white; margin-bottom: 0px;" id="nickname">----------</p>
    <p class ="prewrap" style="font-size: 14px; color: #B9BBBE; margin-bottom: 0px; font-weight: 500;" id="username">----------</p>
</div>
</div>
<div class="lineinbetween"><div class="lineline"></div></div>
<div class="aboutme">
<p class="aboutmeheader fakeginto">ABOUT ME</p>
<p class="aboutmetext opensans" id="aboutmeresult">----------</p>
</div>

And then get the total thing to be inserted into a <textarea>.

What's the easiest way to do this using javascript? I have no idea where to start with this since im quite new to JS.

I does not understand. You want first input´s value into title, second´s into P, or you want larger text into some textarea? The question is unclear. — MetropolisCZ, Jul 21 '21 at 10:22
@MetropolisCZ Sorry, for example: username goes into the title thing, and a nickname someone has given thru an input field goes into the `
` part. If that makes it clearer? — nbeerten, Jul 21 '21 at 10:24
Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Michel, Jul 21 '21 at 10:24
Do you mean you have 5 input tags ,,,, and a textarea and all the data from all 5 input tags you want it to be added to textarea? — Bharat, Jul 21 '21 at 10:26
@Michel getting the value isnt the problem, getting a way to insert it into a piece of text, and then putting that piece of text into a `` is — nbeerten, Jul 21 '21 at 10:26
@Bharat yes, but the data from the input tags have to be inserted inside of a larger text like in the example — nbeerten, Jul 21 '21 at 10:27
Then please show us some more code, and describe exactly what your problem is. Now the question is unclear. — Michel, Jul 21 '21 at 10:27
@Michel edited the question now... Hopefully its more clear now — nbeerten, Jul 21 '21 at 10:34

score 1 · Accepted Answer · answered Jul 21 '21 at 10:31

Something like this?

function merge()
{
    document.getElementById("finalOutput").innerText = "Hi, " + document.getElementById("input1").value + "-" + document.getElementById("input2").value; 
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Test</title>
</head>

<body>
  <input type=text id=input1><br>
  <input type=text id=input2><br>
  <input type=text id=input3><br>
  <input type=text id=input4><br>
  <input type=text id=input5><br>
  <input type=button onclick="merge()" value=Merge> 
  <hr> 
  
  <textarea id=finalOutput>
  </textarea>
</body>

Input into a text area

1 Answers1