Setting value with `textarea.value("")` throws “`TypeError`: `textarea.value` is not a function”

Question

I’m trying to set the value of the <textarea> (planned_use_select.nextSibling) to an empty string.

var planned_use_select = document.querySelector("select[name=planned_use]");

planned_use_select.addEventListener("change", function() {
  planned_use_select.nextSibling.setAttribute("class", "hidden");
  planned_use_select.nextSibling.value("");
});

<div class="form-input">
  <select name="planned_use">
    <option value="Foo">foo</option>
    <option value="Bar">bar</option>
    <option value="Other">Something else</option>
  </select>
  <textarea class="other_planned_use" name="other_planned_use" placeholder="We'd love to know more!"></textarea>
</div>

The first line works fine (correctly applies the class and hides the textarea) but the second line fails: it produces this error:

index.js:200 Uncaught TypeError: planned_use_select.nextSibling.value 
is not a function
at HTMLSelectElement.<anonymous> (index.js:200)

Why can I use .setAttribute() but not .value()?

Answer 1

Use planned_use_select.nextSibling.value = ""

value is a property which you can get or set. It is not a function.