Maometto Maometto - 22 days ago 7
Javascript Question

when change one of textareas value change others values

I'm trying to change multi textareas values when user changes one of them with Javascript (I don't know how to do it with jQuery also), It changes all values to undefined instead of the value I wanted


JSFIDDLE


HTML



<div id="frntnd-edtr" class="col-xs-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#status" aria-controls="status-tab" role="tab" data-toggle="tab" aria-expanded="true"><i class="material-icons">sms</i><p>حالة</p></a></li>
<li role="presentation" class=""><a href="#post" aria-controls="post" role="tab" data-toggle="tab" aria-expanded="false"><i class="material-icons">description</i><p>مقالة</p></a></li>
<li role="presentation" class=""><a href="#quote" aria-controls="quote" role="tab" data-toggle="tab" aria-expanded="false"><i class="material-icons">format_quote</i><p>اقتباس</p></a></li>
<li role="presentation" class=""><a href="#story" aria-controls="story" role="tab" data-toggle="tab" aria-expanded="false"><i class="material-icons">import_contacts</i><p>قصة قصيرة</p></a></li>
<li role="presentation" class=""><a href="#chapter" aria-controls="chapter" role="tab" data-toggle="tab" aria-expanded="false"><i class="material-icons">receipt</i><p>فصل من رواية</p></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="status">
<form class="col-xs-12" method="post" action="" wtx-context="839CDBD9-2EB6-4C4D-91C1-AE6F0F27F4A0">
<input type="hidden" name="post-type" value="status" wtx-context="D32E77E0-5799-4D33-B130-85A998170970">
<textarea name="status-content" class="mg-input col-xs-10 col-sm-11" placeholder="ماذا؟"></textarea>
<fieldset class="actions">
<button id="send-status" type="submit" class="col-xs-2 col-sm-1"><i class="material-icons">send</i></button>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="post">
<form class="col-xs-12" method="post" wtx-context="5083B580-008B-49B2-8185-D02C7F8010E7">
<input type="hidden" name="post-type" value="post" wtx-context="9673EA74-2C4F-4741-A436-8539A9C0636E">
<input name="title" class="mg-input col-xs-10 col-sm-11" placeholder="عنوان المقالة" wtx-context="F56E788D-846C-4148-AD9A-3EAA5FC2B6B0">
<textarea placeholder="ماذا؟" class="mg-input col-xs-10 col-sm-11" name="post-content"></textarea>
<fieldset class="actions">
<button id="send-post" class="col-xs-2 col-sm-1" type="submit"><i class="material-icons">send</i></button>
<button id="drafts-post" class="col-xs-2 col-sm-1 draft"><i class="material-icons">drafts</i></button>
<button id="fullscreen-post" class="col-xs-2 col-sm-1 fullscreen"><i class="material-icons">fullscreen</i></button>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="quote">
<form class="col-xs-12" method="post" action="" wtx-context="10BDB7C7-8DA0-43AA-84F5-5A9C8D45F3C0">
<input type="hidden" name="post-type" value="quote" wtx-context="00814A57-8974-4C27-A373-C8F1A8573E01">
<textarea name="quote-content" class="mg-input col-xs-10 col-sm-11" placeholder="ماذا؟"></textarea>
<input name="author" class="mg-input col-xs-10 col-sm-11" placeholder="من القائل؟" wtx-context="99078C64-D6B3-49BA-8980-D58A31F8A628">
<fieldset class="actions">
<button id="send-status" type="submit" class="col-xs-2 col-sm-1"><i class="material-icons">send</i></button>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="story">
<form class="col-xs-12" method="post" wtx-context="3E3A3A33-4C7B-4765-B8AC-06F15B4553E4">
<input type="hidden" name="post-type" value="story" wtx-context="20F97C01-EFA4-4DF8-9F78-B89685553C26">
<input name="title" class="mg-input col-xs-10 col-sm-11" placeholder="اسم القصة" wtx-context="044CD2A5-6596-44D7-865C-F7DC1F27B2F1">
<textarea placeholder="ما الذي حصل؟" class="mg-input col-xs-10 col-sm-11" name="story-content"></textarea>
<fieldset class="actions">
<button id="send-story" class="col-xs-2 col-sm-1" type="submit"><i class="material-icons">send</i></button>
<button id="drafts-story" class="col-xs-2 col-sm-1 draft"><i class="material-icons">drafts</i></button>
<button id="fullscreen-story" class="col-xs-2 col-sm-1 fullscreen"><i class="material-icons">fullscreen</i></button>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="chapter">
<form class="col-xs-12" method="post" wtx-context="DE08CAC4-64FA-4366-876B-51171A833CD6">
<input type="hidden" name="post-type" value="chapter" wtx-context="0367AE1C-C218-4665-8685-43AEEF1826CB">
<input name="chapter-num" type="number" min="0" step="0.5" class="mg-input col-xs-2 col-sm-2" placeholder="رقم الفصل" wtx-context="DBE69C57-E173-4FC0-82B6-BC6816B04549">
<select name="cat" id="cat" class="postform select2-hidden-accessible" tabindex="-1" aria-hidden="true" wtx-context="E741052F-EAEC-4D08-A160-B81C0B8644FB">
<option value="-1" selected="selected">الرواية</option>
</select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-cat-container"><span class="select2-selection__rendered" id="select2-cat-container" title="الرواية">الرواية</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
<input name="title" class="mg-input col-xs-10 col-sm-11" placeholder="عنوان الفصل" wtx-context="D7D2E640-302B-46DD-8D63-1B2009BA0198">
<textarea placeholder="ما الذي حصل؟" class="mg-input col-xs-10 col-sm-11" name="chapter-content"></textarea>
<fieldset class="actions">
<button id="send-chapter" class="col-xs-2 col-sm-1" type="submit"><i class="material-icons">send</i></button>
<button id="drafts-chapter" class="col-xs-2 col-sm-1 draft"><i class="material-icons">drafts</i></button>
<button id="fullscreen-chapter" class="col-xs-2 col-sm-1 fullscreen"><i class="material-icons">fullscreen</i></button>
</fieldset>
</form>
</div>
</div>
</div>


JS



var textareas = document.getElementById("frntnd-edtr").getElementsByTagName("textarea"),x;
console.log(textareas);
for (x in textareas) {
textareas[x].oninput = function(){
console.log(textareas[x].value);
for (z in textareas) {
if(z !== x) {
textareas[z].value = textareas[x].value;
console.dir(textareas[x].value);
}
}
};
}

Answer

textareas[x] is an incorrect way to access the edited textarea. Try using the this keyword. https://jsfiddle.net/1qgrr3h6/

textareas[x].oninput = function() {
    for (z in textareas) {
        if(textareas[z] !== this) {
            textareas[z].value = this.value;
        }
    }
};

PS: be careful. this sometimes do not work as you would expect. Use it moderately.