document.getElementById（）。value empty

Question

我通過組合兩個字段'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>

我怎樣才能解決我的問題？

非常感謝。

Answer 1

僅僅通過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>

更換onkeyup="generateEndpoint()" 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; 

}