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

希望这有助于！