Question

我生成字段＆＃39;端点＆＃39;通过组合两个字段：＆＃39;版本＆＃39;和＆＃39; productName＆＃39;但它体贴到空虚，我不知道为什么。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何解决我的问题？

非常感谢你。

Answer 1

只需将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>

Answer 2

另外，我发现你使用的是AngularJS并且已经定义了ng-model。如果是这样，您可以直接调用模型而不是使用document.getElementById().value

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

}

document.getElementById（）。值为空

2 个答案: