js関数throught htmlを呼び出すとエラーが発生します

Question

ページの読み込み時に、自分の位置と各トラム停留所の座標を比較し、最も正確なものを選択します。

問題は、私は、私はエラーを取得しています値を変更するときのようにonchange=tram_stops(this.value)である：

SCRIPT438: SCRIPT438: Object doesn't support property or method 'tram_stops'

誰もがこれを整理する方法を知っていますか？

@extends('master') @section('title', 'Trams') 
@section('extrafiles') 
    <script type="text/javascript" src="{{ asset('js/tram.js') }}"></script> 
@endsection 
@section('content') 
<section class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <h1>Metrolink Times</h1> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <div class="form-group"> 
     <label for="tram_stops">Select a station:</label> 
     <form id="tram_stops"> 
      <select id="tram_dropdown" class="form-control" onchange="tram_stops(this.value);"> 
      @foreach($entities as $entity) 
       <option data-lng="{{ $entity->_geoloc->lng }}" data-lat="{{ $entity->_geoloc->lat }}" value="{{empty($entity->_geoloc->slug) ? 'no-slug' : $entity->_geoloc->slug}}">{{$entity->name}}</option> 
      @endforeach 
      </select> 
     </form> 
     </div> 
    </div> 
    <div id="display"> 
    </div> 
    </div> 
</section> 
@endsection 

$(document).ready(function() { 
    var user_lat; 
    var user_lng; 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
    alert("Geolocation is not supported by this browser."); 
    } 

    function showPosition(position) { 
    var distanceArray = []; 
    var slugArray = []; 
    user_lat = position.coords.latitude; 
    user_lng = position.coords.longitude; 
    $("option").each(function() { 
     var unit = "K"; 
     var tram_lat = $(this).attr("data-lat"); 
     var tram_lng = $(this).attr("data-lng"); 
     var slug = $(this).attr("value"); 
     var radlat1 = Math.PI * tram_lat/180 
     var radlat2 = Math.PI * user_lat/180 
     var theta = tram_lng - user_lng; 
     var radtheta = Math.PI * theta/180 
     var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); 
     dist = Math.acos(dist) 
     dist = dist * 180/Math.PI 
     dist = dist * 60 * 1.1515 
     if (unit == "K") { 
     dist = dist * 1.609344 
     } 
     if (unit == "N") { 
     dist = dist * 0.8684 
     } 
     slugArray.push(slug); 
     distanceArray.push(dist); 
    }); 
    var closest = Math.min(...distanceArray); 
    var index = (distanceArray.indexOf(closest)); 
    var slug = (slugArray[index]); 
    if (sessionStorage.getItem("item") === null) { 
     sessionStorage.setItem("item", slug); 
     timeout(); 
    } else { 
     timeout(); 
    } 
    } 
}); 

function timeout() { 
    setTimeout(function() { 
    var tram_val = sessionStorage.getItem("item"); 
    tram_stops(tram_val); 
    $("#tram_dropdown").val(tram_val); 
    }, 30000); 
} 

function tram_stops(tram_value) { 
    sessionStorage.setItem("item", tram_value); 
    $.ajax({ 
    url: '/tramsearch/' + tram_value, 
    type: 'post', 
    dataType: 'html', 
    success: function(data) { 
     $("#display").html(data); 
     var tram_value = tram_value; 
    }, 
    error: function(data) { 
    }, 
    headers: { 
     'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') 
    } 
    }); 
    timeout(); 
} 

Answer 1

理由は、任意のHTML要素のIDと同じ名前のJavaScriptで機能を持っている場合、この問題が発生した

。あなたのケースでは、tram_stopsは、フォームIDとこの名前の関数を持っています。

<form id="tram_stops"> 

ソリューション

変更フォームIDまたは関数名を変更したり、jQueryのを使用して動的のonchangeイベントをアタッチ：への関数のonchange

$("body").on("change", "#tram_dropdown", function(){/*Your Code*/}); 

Answer 2

変更：

onchange="tram_stops();" 

その後次のようにjqueryを使用して値を取得します。

var tram_value = $('#tram_dropdown').val(); 

Answer 3

onchange=""属性を追加する代わりに、イベントをリスンする方がよいでしょう。これを行う方法の例は次のとおりです。

$("body").on("change", "#tram_dropdown", function(){ 
    sessionStorage.setItem("item", tram_value); 
    $.ajax({ 
     url: '/tramsearch/' + tram_value, 
     type: 'post', 
     dataType: 'html', 
     success: function(data) { 
      $("#display").html(data); 
      var tram_value = tram_value; 
     }, 
     error: function(data) { 
     }, 
     headers: { 
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') 
     } 
    }); 
    timeout(); 
}); 

希望します。