时间戳

首页 > 解决方案 > 无法从输入字段中获取值并将其显示到其他字段

javascript - 无法从输入字段中获取值并将其显示到其他字段

问题描述

  1. 有三个下拉菜单。
  2. 从该下拉列表中获取价值。
  3. 显示在按钮字段上。问题：我。我想如果我点击那个按钮，那么值应该添加到另一个将动态添加的按钮上。我正在动态生成按钮，但我没有在该按钮字段上收到该值。这是我的代码。

jQuery(document).ready(function($) {
     const movingAverageOutput = document.getElementById('moving_average_output');
   const simpleMovingAverage = document.getElementById('simple_moving_average');
   
   const output = {
   
   left: '',
   compare: '',
   right: '',
   
   toString: function() {
     return `${this.left} ${this.compare} ${this.right}`;
   },
   
   };
   
   const triggerModal = (val) => {
   if (val == 1) return $("#myModal_first").modal('show');
   if (val == 2) {
     simpleMovingAverage.value = '';
     $("#myModal_second").modal('show');
   }
   };
   
   let sideIndicator = '';
   
   const setSideIndicator = (id) => {
   if (id === 'left_indicator_side_select-me') return sideIndicator = 'left';
   if (id === 'right_side_indicator_select-me') return sideIndicator = 'right';
   };
   
   window.addEventListener('change', function(e) {
   triggerModal(e.target.value);
   setSideIndicator(e.target.id);
   });
   
   $("#comparator_indicator").on('change', function() {
   output.compare = $(this).val();
   movingAverageOutput.textContent = output.toString();
   });
   
   $("#movingaveragebutton").on('click', function(event) {
   output[sideIndicator] = simpleMovingAverage.value;
   movingAverageOutput.textContent = output.toString();
   });
   
   $("#exponentialbutton").on('click', function(event) {
   exponentialstring = $("#exponentialstring").val();
   exponentialnumber = $("#exponentialnumber").val();
   output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
   movingAverageOutput.textContent = output.toString();
   });
   });
   
   $(document).ready(function() {
     
     addGenerateButtonListener();
   });
   
   function addGenerateButtonListener() {
     const button = $('#moving_average_output').get(0);
     button.addEventListener('click', function () {
       const remainingButtons = +button.getAttribute('data-remainingButtons');
       if(remainingButtons > 0) {
         button.setAttribute('data-remainingButtons', remainingButtons-1);
         cloneAndAppendDynamicButton(button, remainingButtons);
         generateAndAppendRemoveButton(remainingButtons);
       }
       remainingButtons == 0 && console.log('Maximum buttons reached');
     });
   }
   function cloneAndAppendDynamicButton(button, i) {
     const clonedNode = button.cloneNode(),
       div = $('#dynamicButtonsDiv').get(0);
     clonedNode.id = 'dynamicButton' + i;
     clonedNode.setAttribute('data-occurance', i);
     div.appendChild(clonedNode);
   }
   function generateAndAppendRemoveButton(i) {
     const rem = document.createElement('input'),
       div = $('#dynamicButtonsDiv').get(0);
     rem.type = 'button';
     rem.value = 'Remove';
     rem.setAttribute('data-occurance', i);
     rem.id = 'removeButton' + i;
     rem.addEventListener('click', removeOccurance);
     div.appendChild(rem);
   }
   function removeOccurance() {
     const occurance = this.getAttribute('data-occurance');
     $('#dynamicButtonsDiv > [data-occurance="'+ occurance +'"]').remove();
   }
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title></title>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="row block-9">
         <div class="col-md-4 pr-md-4">
            <div class="form-group">
               <label for="sel1">Left Side Indicator:</label>
               <select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
                  <option>Select</option>
                  <option value="1">Moving Average</option>
                  <option value="2">Exponential Moving Average</option>
               </select>
            </div>
         </div>
         <div class="col-md-4 pr-md-4">
            <div class="form-group">
               <label for="sel1">Comparator:</label>
               <select class="form-control" id="comparator_indicator" name="comparator_indicator">
                  <option>Select</option>
                  <option value="=">=</option>
                  <option value=">">></option>
                  <option value="<"><</option>
               </select>
            </div>
         </div>
         <div class="col-md-4 pr-md-4">
            <div class="form-group">
               <label for="sel1">Right Side Indicator:</label>
               <select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
                  <option>Select</option>
                  <option value="1">Moving Average</option>
                  <option value="2">Exponential Moving Average</option>
               </select>
            </div>
         </div>
         <div class="col-md-10 pr-md-10">
            <div class="form-group">
               <button type="button" id="moving_average_output" name="moving_average_output" data-remainingButtons="5" class="btn-primary form-control">Value goes here</button>
            </div>
         </div>
         <div id="dynamicButtonsDiv"></div>
      </div>
      <div class="form-group">
         <div id="myModal_first" class="modal fade" role="dialog">
            <div class="modal-dialog">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <div class="modal-content">
                  <div class="modal-body">
                     <input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
                  </div>
                  <button type="button" id="movingaveragebutton" name="movingaveragebutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
               </div>
            </div>
         </div>
      </div>
      <div class="form-group">
         <div id="myModal_second" class="modal fade" role="dialog">
            <div class="modal-dialog">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <div class="modal-content">
                  <div class="modal-body">
                     <div class="row block-9">
                        <div class="col-md-6 pr-md-6">
                           <div class="form-group">
                              <select class="form-control" id="exponentialstring" name="exponentialstring">
                                 <option>SELECT THE OPTIONS</option>
                                 <option value="open">OPEN</option>
                                 <option value="close">CLOSE</option>
                                 <option value="low">LOW</option>
                                 <option value="high">HIGH</option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-6 pr-md-6">
                           <div class="form-group">
                              <select class="form-control" id="exponentialnumber" name="exponentialnumber">
                                 <option>SELECT THE OPTIONS</option>
                                 <option>1</option>
                                 <option>2</option>
                                 <option>3</option>
                                 <option>4</option>
                                 <option>5</option>
                                 <option>6</option>
                                 <option>7</option>
                                 <option>8</option>
                                 <option>9</option>
                                 <option>10</option>
                              </select>
                           </div>
                        </div>
                     </div>
                  </div>
                  <button type="button" id="exponentialbutton" name="exponentialbutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
               </div>
            </div>
         </div>
      </div>
      <div id="responsecontainer" align="center">
      <script type="text/javascript" src="main.js"></script>
   </body>
</html>

  1. 从下拉列表中选择值。
  2. 值将显示在按钮字段上。
  3. 单击该按钮，以便动态生成按钮字段。
  4. 现在，我希望每当单击按钮时，按钮值都应打印在该动态生成的按钮上。

标签： javascriptjqueryhtmlajaxtwitter-bootstrap-3

解决方案

推荐阅读