problema controllo

[andreabud]

Ciao Ragazzi, sono nuovo del forum.
Sto realizzando un range che svolga la seguente funzione con onchange.
Cerco di spiegarmi meglio una volta che cambio la posizione del valore oltre a darlo in output (lo fa benissimo con una funzione trovata tempo fa) deve cambiare il background ed il color font.
vi scrivo qui css, div html e funzione js

<style>
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 660px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 620px;
    height: 20px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #18a55e;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #fff;
}

input[type=range]::-moz-range-track {
    width: 400px;
    height: 5px;
    background: #fff;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #18a55e;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 620px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #fff;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #fff;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: red;
}
input[type=range]:focus::-ms-fill-lower {
    background: #fff;
}
input[type=range]:focus::-ms-fill-upper {
    background: #fff;
}

output { 
position: relative;
background: url([url]http://www.goodbuyauto.it/vendinew/i...mcontent.png);[/url] 
background-repeat: no-repeat;
width: 160px; 
height: 60px; 
text-align: center; 
color: #00C071; 
border: 20px; 
display: block; 
font: bold 30px Source Sans Pro;
bottom: -50%;
}
output:after { 
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #999999;
top: 100%;
left: 40%;
}
</style>


<script type="text/javascript">
function ControlloKm() {
var x = $ ( ".range_km"). val ();
//creazione var targa per controllo
if ( x == 105000)


//controllo con serch
//if (kminput.value > 100000) 
{
// In caso di errore stampo un avviso e pulisco il campo...
// document.getElementById("error1").innerHTML = "<p>I valori inseriti non sono di una targa autorizzata</p>";
document.getElementById('error2').hidden = false;
document.getElementById('km').style.background = url('http://www.goodbuyauto.it/vendinew/images/kmcontentfail.png ');
document.getElementById('km').style.color ="#fff"; 
//alert("I valori inseriti non sono di una targa autorizzata");
}
else{

document.getElementById('km').style.background = url('http://www.goodbuyauto.it/vendinew/images/kmcontentok.png ');
document.getElementById('km').style.color ="#fff";
document.getElementById('check3').hidden= false;
document.getElementById('check4').hidden= false;


}
}
</script>

<div id="selezione_km" style="background: transparent url([url]http://www.goodbuyauto.it/vendinew/images/KM_BG.png[/url]) no-repeat" alt="sfondomenu" >
<img src="http://www.goodbuyauto.it/vendinew/images/KM_Auto.png" /> 
<br>
<br>
<input type="range" name="range_km" id="range_km" min="0" max="105000" step="5000" value="10000">
<output for="range_km" id="km" oninput="value" onchange="ControlloKm(range_km)"> </output>
<script>
var el, newPoint, newPlace, offset;
// Select all range inputs, watch for change
$("input[type='range']").change(function() {
// Cache this for efficiency
el = $(this);
// Measure width of range input
width = el.width();
// Figure out placement percentage between left and right of input
newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
offset = -34;
// Prevent bubble from going beyond left or right (unsupported browsers)
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint; }
// Move bubble
el
.next("output")
//.next("auto")
.css({
left: newPlace,
marginLeft: offset})
.text(el.val());
})
// Fake a change to position bubble at page load
.trigger('change');
</script>
<br>
</div>

 

[criric]

Ciao, l'evento onchange lo devi mettere sul tag input non su quello sotto che tra l'altro non mi sembra che esista nell'html ( <output> ).
Poi per indicare a jquery di recuperare un elemento dall'id si usa il cancelletto non il punto

var x = $("#range_km").val();

 

[andreabud]

grazie ho cambiato la funzione così

function ControlloKm(range_km) {
var x = $("#range_km").val();
//creazione var targa per controllo
if ( x == 105000)

//controllo con serch
//if (kminput.value > 100000)
{
// In caso di errore stampo un avviso e pulisco il campo...
// document.getElementById("error1").innerHTML = "<p>I valori inseriti non sono di una targa autorizzata</p>";
document.getElementById('error2').hidden = false;
document.getElementById('km').style.color ="red";
//alert("I valori inseriti non sono di una targa autorizzata");
}
else{

document.getElementById('km').style.background-image = url('http://www.goodbuyauto.it/vendinew/images/kmcontentok.png ');
document.getElementById('km').style.color ="#fff";
document.getElementById('check3').hidden= false;
document.getElementById('check4').hidden= false;

}
}