when change one of textareas value change others values

Question

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);
      }
    }
  };
}

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Nov 14 '16 at 16:35

score 1 · Answer 1 · answered Nov 14 '16 at 16:40

1

Use e.target.value:

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

answered Nov 14 '16 at 16:40

tugce

1,008
1
10
25

score 1 · Accepted Answer · answered Nov 14 '16 at 16:42

1

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.

answered Nov 14 '16 at 16:42

Andrewmat

89
8

`for/in` loops should only be used to loop through an object. `textareas` is a "node-list", which is an "array-like" object and so a traditional counting loop should be used or the `.forEach()` method for user agents that support it. – Scott Marcus Nov 14 '16 at 16:49
@ScottMarcus I tried to use forEach, I got "uncaught error: textareas.forEach() is not a function – Maometto Nov 14 '16 at 16:54
@Maometto `.forEach()` on a node list will only work in modern browsers and not in IE at all: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach This is why I said that you could only use it in user agents that support it, but it's really best to use a standard counting loop. – Scott Marcus Nov 14 '16 at 17:01

when change one of textareas value change others values

HTML

JS

2 Answers2