Блог

Главная - Вопросы по программированию - document.getElementById().значение пустое

document.getElementById().значение пустое

#javascript

#javascript

Вопрос:

Я генерирую поле ‘endpoint’, комбинируя два поля: ‘version’ и ‘ProductName’, но оно выглядит как пустое, и я не знаю почему.

 function generateEndpoint() {
  var yourSelect = document.getElementById("version");
  document.getElementById('endpoint').value = '/'  
    document.getElementById('productName').value   '/'  
    yourSelect.options[yourSelect.selectedIndex].value;

} 
 <div class="form-group" ng-class="{ 'has-error': invalid.productName, 'has-success': valid.productName}">
  <label for="productName">product name *</label>
  <input type="text" id="productName" name="productName" class="form-control" placeholder="example: myapi_fr_product " ng-model="api.productName" ng-required="true" onkeyup="generateEnpoint()">
  <span id="helpBlock" class="help-block" ng-show="help.productName.required">product name is required.</span>
</div>

<div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}">
  <label for="version">version *</label>
  <select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true" onchange="generateEndpoint()">
    <option value=""></option>
    <option value="beta">beta</option>
    <option value="v1">v1</option>
  </select>
  <span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span> 
</div>

<div class="form-group" ng-class="{ 'has-error': invalid.endpoint, 'has-success': valid.endpoint}">
  <label for="endpoint">exposure endpoint base path *</label>
  <input type="text" id="endpoint" name="endpoint" class="form-control" placeholder="example: /myapi/v1" ng-model="api.endpoint" ng-required="true">
  <span id="helpBlock" class="help-block" ng-show="help.endpoint.required">exposure endpoint is required.</span>
</div>

Как я могу решить свою проблему?

Большое вам спасибо.

Комментарии:

1. Я не могу воспроизвести проблему. Изменение выбора успешно считывает значение первого ввода. Изменение первого ввода связано с совершенно другой проблемой (что очевидно, если вы посмотрите на сообщения об ошибках).

2. Если вы выберете выпадающий список, то значение Product Name Version добавит?.

3. Однако при использовании Angular код работает, как и ожидалось. JS, вы не должны обращаться к DOM напрямую. Смотрите этот пример для выбора AngularJS.

4. Какой пример???

Ответ №1:

Кроме того, я вижу, что вы используете AngularJS и уже ng-model определили. Если это так, вы можете вызвать модель напрямую, а не использовать document.getElementById().value 

 function generateEndpoint() {
  $scope.api.endpoint = $scope.api.productName   $scope.api.version;

}

Ответ №2:

Просто замените onkeyup="generateEndpoint()" на onkeypress="generateEndpoint()" 

 function generateEndpoint() {
  var yourSelect = document.getElementById("version");
  document.getElementById('endpoint').value = '/'  
    document.getElementById('productName').value   '/'  
    yourSelect.options[yourSelect.selectedIndex].value;

} 
 <div class="form-group" ng-class="{ 'has-error': invalid.productName, 'has-success': valid.productName}">
  <label for="productName">product name *</label>
  <input type="text" id="productName" name="productName" class="form-control" placeholder="example: myapi_fr_product " ng-model="api.productName" ng-required="true" onkeypress="generateEndpoint()">
  <span id="helpBlock" class="help-block" ng-show="help.productName.required">product name is required.</span>
</div>

<div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}">
  <label for="version">version *</label>
  <select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true" onchange="generateEndpoint()">
    <option value=""></option>
    <option value="beta">beta</option>
    <option value="v1">v1</option>
  </select>
  <span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span> 
</div>

<div class="form-group" ng-class="{ 'has-error': invalid.endpoint, 'has-success': valid.endpoint}">
  <label for="endpoint">exposure endpoint base path *</label>
  <input type="text" id="endpoint" name="endpoint" class="form-control" placeholder="example: /myapi/v1" ng-model="api.endpoint" ng-required="true">
  <span id="helpBlock" class="help-block" ng-show="help.endpoint.required">exposure endpoint is required.</span>
</div>

Способ ANGULARJS

 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.api = {};
  $scope.update = function() {
    $scope.api.endpoint = $scope.api.productName   "/"   $scope.api.version;
  }
}); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="form-group" ng-class="{ 'has-error': invalid.productName, 'has-success': valid.productName}">
    <label for="productName">product name *</label>
    <input type="text" id="productName" name="productName" class="form-control" placeholder="example: myapi_fr_product " ng-model="api.productName" ng-required="true" ng-change="update()">
    <span id="helpBlock" class="help-block" ng-show="help.productName.required">product name is required.</span>
  </div>

  <div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}">
    <label for="version">version *</label>
    <select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true" ng-change="update()" ;>
      <option value=""></option>
      <option value="beta">beta</option>
      <option value="v1">v1</option>
    </select>
    <span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span> 
  </div>

  <div class="form-group" ng-class="{ 'has-error': invalid.endpoint, 'has-success': valid.endpoint}">
    <label for="endpoint">exposure endpoint base path *</label>
    <input type="text" id="endpoint" name="endpoint" class="form-control" placeholder="example: /myapi/v1" ng-model="api.endpoint" ng-required="true">
    <span id="helpBlock" class="help-block" ng-show="help.endpoint.required">exposure endpoint is required.</span>
  </div>
</div>

Комментарии:

1. Этот код работает… Ваш не Я просто следовал идее вопроса, используя JS. Я буду обновлять с помощью AngularJS

2. Большое спасибо. Хорошего вам дня

Метки: