通過HTML調用js函數導致錯誤

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或改變功能名稱或使用動態連接onchange事件的jQuery：

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

Answer 2

變化的onchange功能：

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(); 
}); 

希望這有助於！