html text area show set span value

Question

In my html, I have a text area and input area.

my jquery is trying to set some value to the span element.

<div class="col-xs-3">
    <span data-name="sstNumber" class="sstNumber">
        <textarea class="wt-resize" maxlength="50"  rows="1" cols="20"></textarea>
    </span>
    <br>
</div>

when i do document.querySelector('[data-name="sstNumber"]').textContent = "value"; the text area border dissappears. How do i show the value and the text border doesn't dissapear?

<div class="col-xs-3">
    <input type="text" name="sstnum" value="" size="20">
    <span data-name="sstNumber2" class="sstNumber2"></span>
    <br>
</div>

when i do document.querySelector('[data-name="sstNumber2"]').textContent = "value2"; the value goes outside the box. How do i show the value in the box?

Do you want to change the value of the textarea and the input field? — Jerodev, Jun 13 '19 at 08:27
yes. i want to change value by setting the spam element value — Jacel, Jun 13 '19 at 08:31
@Jacel you can't target the span to do that, you have to target the textarea _within_ the relevant span. See Jerodev's answer below — ADyson, Jun 13 '19 at 08:33

score 1 · Accepted Answer · answered Jun 13 '19 at 08:32

If you want to change the value of a textarea or an input field, you have to target the element directly and set the value attribute.

Like so:

document.querySelector('span[data-name="sstNumber"] textarea').value = "value";

<div class="col-xs-3">
    <span data-name="sstNumber" class="sstNumber">
        <textarea class="wt-resize" maxlength="50"  rows="1" cols="20"></textarea>
    </span>
    <br>
</div>

Also, you are not using jQuery, this is vanilla JavaScript.

score 0 · Answer 2 · answered Jun 13 '19 at 08:32

You are applying the value to the wrong element. You simply need to target the actual textarea element if you don't want the textarea to disappear.

document.querySelector('textarea.wt-resize').value = "value";

<div class="col-xs-3">
    <span data-name="sstNumber" class="sstNumber">
        <textarea class="wt-resize" maxlength="50"  rows="1" cols="20"></textarea>
    </span>
    <br>
</div>

score 0 · Answer 3 · answered Jun 13 '19 at 08:37

Your first problem with the disappearing border is, that you actually overwrite the content of your span element with :

document.querySelector('[data-name="sstNumber"]').textContent = "value";

Since your textarea is a child element of your span element, you overwrite your textarea. To fix that, put the textarea outside the span element:

 <span data-name="sstNumber" class="sstNumber"></span>
 <textarea class="wt-resize" maxlength="50"  rows="1" cols="20"></textarea>

If you want to change the value of the input element you need to select that element and not the span element :

document.querySelector('[name="sstnum"]').value = "value2";

html text area show set span value

3 Answers3