当更改textareas值之一更改其他值时

Question

当用户使用Javascript更改多个textareas值时，我尝试更改多个textarea值（我也不知道如何使用jQuery），它将所有值更改为undefined，而不是我想要的值
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 1

使用e.target.value：

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

Answer 2

textareas [x]是访问已编辑textarea的错误方法。 尝试使用this关键字。 https://jsfiddle.net/1qgrr3h6/

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

PS：小心点。 有时this可能无法正常工作。 适度使用。