document.getElementById（）。value empty

Question

'version'と 'productName'の2つのフィールドを組み合わせてフィールド 'endpoint'を生成しますが、それは空のように思えます。

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

だけonkeyup="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>

onkeypress="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>

を置き換えます3210

Answer 2

また、AngularJSを使用しており、既にng-modelが定義されています。その場合は、document.getElementById().value

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

}