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.