Добавление значения при нажатии кнопки

Question

У меня есть скрипт, который нажатием кнопки находит ближайшее место к вам путем поиска массива, затем находит соответствующую запись в другом массиве и добавляет номер в этот массив. Однако у меня возникают проблемы с добавлением к нему значения. Вместо того, чтобы начинать с «0», а затем добавляя 1, делая это «1», это выглядит так: «01» Я думал, что это потому, что это была строка, в которой я пытался разобрать ее, поскольку Int это не сработало. Я думаю, что это может быть проблема с тем, как я изначально устанавливаю значения в массиве, я сделал цикл For, чтобы установить первые 200 значений равными 0, хотя я хочу, чтобы это запускалось только один раз, когда нажата кнопка, она добавляет число, которое вводится в текстовое поле. Я не уверен, как продвигаться по этой проблеме. Код ниже:

Я попытался выделить важные биты моего кода, где я думаю, что проблема кроется.

Скриншот задачи (вместо добавления значения я положил в коробку он просто прикрепляет его до конца, как если бы это были строки):

jQuery(function($){ 



    var Loc1; 
    var Loc2; 
    var service; 
    var marker = []; 
    var pos; 
    var infowindow; 
    var placeLoc 
    **var j;** 
    **var markerValue = [];** 

      **for (j = 0; j<200; j++){ 

     markerValue[j] = 0; 


    }** 

    var markers; 

    var x = 0, y = 0, 
     vx = 0, vy = 0, 
     ax = 0, ay = 0; 

    var points; 


    var sphere = document.getElementById("sphere"); 
    var counting = false; 
    var counter = 0; 
    var numberOne; 

if (window.DeviceMotionEvent != undefined) { 
    window.ondevicemotion = function(e) { 

     ax = event.accelerationIncludingGravity.x * 5; 
     ay = event.accelerationIncludingGravity.y * 5; 

     document.getElementById("counterSpan").innerHTML = Math.round(counter*10)/10; 
     //document.getElementById("accelerationX").innerHTML = Math.round(e.accelerationIncludingGravity.x * 10)/10; 
     //document.getElementById("accelerationY").innerHTML = Math.round(e.accelerationIncludingGravity.y * 10)/10; 
     //document.getElementById("accelerationZ").innerHTML = Math.round(e.accelerationIncludingGravity.z * 10)/10; 

     var moveX = Math.round(e.accelerationIncludingGravity.x * 10)/10; 
     //var moveY = Math.round(e.accelerationIncludingGravity.y * 10)/10; 
     //var moveZ = Math.round(e.accelerationIncludingGravity.z * 10)/10; 

     if(moveX > 5 || moveX < -5) { 
      counting = true; 
      //alert(counting); 
      if(counter < 100){counter+=0.01;} 
      } 




     if (e.rotationRate) { 
      //document.getElementById("rotationAlpha").innerHTML = Math.round(e.rotationRate.alpha * 10)/10; 
      //document.getElementById("rotationBeta").innerHTML = Math.round(e.rotationRate.beta * 10)/10; 
      //document.getElementById("rotationGamma").innerHTML = Math.round(e.rotationRate.gamma * 10)/10; 
     }  
    } 



    setInterval(function() { 
     var landscapeOrientation = window.innerWidth/window.innerHeight > 1; 
     if (landscapeOrientation) { 
      vx = vx + ay; 
      vy = vy + ax; 
     } else { 
      vy = vy - ay; 
      vx = vx + ax; 
     } 
     vx = vx * 0.98; 
     vy = vy * 0.98; 
     y = parseInt(y + vy/50); 
     x = parseInt(x + vx/50); 

     boundingBoxCheck(); 

     //sphere.style.top = y + "px"; 
     //sphere.style.left = x + "px"; 

    }, 25); 
} 


function boundingBoxCheck(){ 
    if (x<0) { x = 0; vx = -vx; } 
    if (y<0) { y = 0; vy = -vy; } 
    if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; } 
    if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; } 

} 

function minmax(value, min, max) 
{ 
    if(parseInt(value) < 0 || isNaN(value)) 
     return 0; 
    else if(parseInt(value) > 100) 
     return 100; 
    else return value; 

} 



    var $overlay = $('.overlay'), 
     resize = true, 
     map; 



function initialize() { 
    /*var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

}*/ 
var mapOptions = { 
    zoom: 15 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 

      var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 

     var request = { 
     location:pos, 
     center:pos, 
     radius:1000, 

    }; 

    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch(request,callback); 
     pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 


     infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'You Are Here' 
     }); 
     $('#btnEnergize').data('pos',pos); 

     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 



    function callback(results, status) { 
     markers = []; 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     markers.push(createMarker(results[i])); 
    } 
    } 
    $('#btnEnergize').data('markers',markers); 
} 
} 



function createMarker(place) { 


    placeLoc = place.geometry.location; 

    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location, 
    icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 8, 
     fillColor:'00a14b', 
     fillOpacity:0.3, 
     fillStroke: '00a14b',  
     strokeWeight:4, 
     strokeOpacity: 0.7 
    }, 




    }); 


    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
    return marker; 
} 



function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

$('#show').click(function(){ 

    $overlay.show(); 

    if (resize){ 
    google.maps.event.trigger(map, 'resize'); 
    resize = false; 
    } 

}); 

$('.overlay-bg').click(function(){ 

    $overlay.hide(); 

}); 


**$("#btnEnergize").click(function() { 



    var pos = $(this).data('pos'), 
     markers = $(this).data('markers'), 
     closest; 

     if(!pos || !markers){ 
    return; 
    } 

    $.each(markers,function(){ 
    var distance=google.maps.geometry.spherical 
        .computeDistanceBetween(this.getPosition(),pos); 
    if(!closest || closest.distance > distance){ 
     closest={marker:this, 
       distance:distance} 
    } 
    }); 

    if(closest){ 
    //closest.marker will be the nearest marker, do something with it 
    //here we simply trigger a click, which will open the InfoWindow 
    google.maps.event.trigger(closest.marker,'click') 


    Loc2 = closest.marker.getPosition(); 
    numberOne = $("#numberOne").val(); 
    alert(numberOne); 
    localStorage.setItem('points',numberOne); 

    for (var i=0; i<markers.length; i++) { 
     Loc1 = markers[i].getPosition(); 

     if (Loc1.equals(Loc2) /*&& numberOne <= counter*/){ 


      console.log("marker array Location 1 " + Loc1 + " marker " + i); 
      console.log("closest Location 2 " +Loc2); 

      counter -= numberOne; 
      markerValue[i] += numberOne; 


      console.log("marker " + i + " now equals " + markerValue[i]); 

     } 
    } 
    } 

alert (markerValue[19]); 

});** 


});// JavaScript Document 

Answer 1

С скользя по коду это выглядит, как вы запрашиваете значение здесь:

numberOne = $("#numberOne").val(); 

, которые должны быть

numberOne = parseInt($("#numberOne").val()); 

Вы используете parseInt в функции minmax(), но этот не используется. Если бы это был тот, который вы использовали для анализа значения INT имеет один недостаток в том, что он будет возвращать только разобранное значение на 0 и 100:

function minmax(value, min, max) 
{ 
    // Flip these two, CHECK FOR isNaN first. 
    if(parseInt(value) < 0 || isNaN(value)) 
     return 0; 
    else if(parseInt(value) > 100) 
     return 100; 
    else return value; // Here you return value, not parseInt(value) 
}