i am very new to JS and strugle with the following problem:
I want wo convert the value in the numberbox in the answer beside by any change of the value. Including the variables NP0, NP1 and DP0 from the HTML element.
-------------------------UPDATE 1--------------------------
To use html variables in javascript we can do this via data-* attributes. Thanks to Luca.
But how can I intitiate a calculation, when the page is loading for the first time?
And how can the calculation be executed on any change of the value?
$(".slide").on('change mousemove', function() {
$(this).next(".text").text(this.value)
});
$(".calc").on('change paste keyup', function() {
$(this).next(".text").text((128+(this.value*0.0625))/1)
});
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label>
<br>
<br>
<input name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">= <label class="text"></label> km/h
You need data-* attributes, so your HTML should be
<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label>
<br>
<br>
<input name="period" class="calc" value="0" min="0" max="4096" type="number" data-NP0="128" data-NP1="0.00625" data-DP0="1">= <label class="text"></label> km/h
and your script
$(".slide").on('change mousemove', function() {
$(this).next(".text").text(this.value)
});
$(".calc").on('change paste keyup', function() {
$(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"))
});
UPDATE 1
To compute your value immediately when you subscribe needed events, you can use trigger to force a "change" event, so your script should be
$('.calc').on('change paste keyup', function(){
$(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"));
}).trigger('change');
Sorry I miss a point :)
To get continuous compute while spinning with buttons, you can add the "input" event, so your code become
$('.calc').on('change paste keyup input', function(){
$(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"));
}).trigger('change');
I updated the fiddle, again
Here a jsfiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-2.2.2.min.js">/script>
<script type="text/javascript">
function Load(){
$(document).ready(function(){
$(".slide").on('change mousemove', function() {
$(this).next(".text").text(this.value);
});
$(".calc").on('change paste keyup', function() {
var value = $('#abc').val();
$(this).next(".text").text((128+ value*0.0625)/1)
});
});
}
</script>
</head>
<body onLoad="Load()">
<input id="period" name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range">
<label class="text">0.25</label> <br><br>
<input id ="abc" name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">=
<label class="text"></label> km/h
</body>
</html>
you can use id and get the value through it will update for hope it will help
Related
I have to do a function in a "game of life" that will change a cell to living or dead on click depending on it's previous state. Seems pretty easy and it probably is but sometimes you're stuck and for whatever reason you can't find that easy solution.
The main problem is that I can't access only one clicked img and click() function only works with area div (https://imgur.com/a/k7iY7OV).
Obviously I've searched the internet and tried many different versions of code but nothing is working.
$(document).ready(function(){
simulatorInit();
$("#area").click(function()
{
alert("dasd");
});
});
That is what I have now and it alerts when I click on the "board" but I dunno how to access specific "clicked" img.
Tried something like this but it doesn't work either:
$(this).click(function()
{
if($("div").attr('src','dead.gif')) $(this).attr('src','alive.gif')
});
});
Edit:: html code:
<div id="areaWrapper">
<div id="area" class="ui-corner-all">
Aby rozpocząć wygeneruj plansze
</div>
</div>
<!-- Okienko panelu kontrolnego -->
<div id="controls">
<label for="area-x">Szerokość</label>
<input id="area-x" value="10" type="number" min="3" /><br/>
<label for="area-y">Wysokość</label>
<input id="area-y" value="10" type="number" min="3" /><br/>
<button id="generate-area-button">Generuj plansze</button>
<hr/>
<label for="live-prob">Szansa na losowe życie</label>
<input id="live-prob" value="0.4" type="number" min="0.01" max="1" step="0.01" /><br/>
<button id="random-area-button">Losuj</button>
<hr/>
<label for="speed">Szybkość w ms</label>
<input id="speed" value="600" type="number" min="40" step="10" /><br/>
</div>
<!-- Pasek narzędziowy -->
<div id="bar" class="ui-widget ui-widget-content ui-corner-all">
Krok:<span id="step">0</span>
<button id="play-pause-button">Zatrzymaj/Wznów</button>
<button id="show-panel-button">Pokaż panel</button>
</div>
and generating cells:
function generateArea(){
var x = parseInt($("#area-x").val());
var y = parseInt($("#area-y").val());
$('#area').html('');
for(var i=0;i<y;i++){
for(var j=0;j<x;j++){
var img=$("<img />");
img.attr("src",dead);
img.attr("cell-x",j);
img.attr("cell-y",i);
img.addClass("cell");
$('#area').append(img);
}
$('#area').append($('<br/>'));
}
}
You aren't binding the click handler to the images, only to the parent <div>.
Also if($("div").attr('src','dead.gif')) is not doing what you think. It is actually setting the attribute to dead.gif each time. It should be more like if($("div").attr('src') === 'dead.gif'))
Try
$('#area img').click(function(){
$(this).attr('src', function(i, existingSrc){
return existingSrc === 'dead.gif' ? 'alive.gif' : 'dead.gif';
});
});
The event.target has the specific img info. Refer the jQuery API page: https://api.jquery.com/event.target/
I have a sliderbar that takes input from the textfield and resets its position accordingly; however, I cannot figure out how to do the following:
Make it so that the sliderbar repositions itself for any value within the range, not just non-decimal inputs.
Make it so that the textfield value changes accordingly as the sliderbar is toggled.
The code can be found below.
Any help is appreciated, thank you!
<div>
<input id="slider" type="range" min="0" max="2" step="0.001"/>
<input id="input" type="text" value="1"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#input').change(function(){
slider.value=parseInt(this.value)
});
</script>
I have a sliderbar that takes input from the textfield and resets its
position accordingly;
I don't see how that work with the code given since you're using parseInt and would need parseFloat for that. Anyway, below is what you asked for:
$('#input').change(function() {
$('#slider').val(parseFloat(this.value))
});
$('#slider').on("input change", function() {
$('#input').val(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
<input id="slider" type="range" min="0" max="2" step="0.001" />
<input id="input" type="text" value="1" />
</div>
You don't need to use parseInt() since both need to be string.
<div>
<input id="slider" type="range" min="0" max="2" step="0.001"/>
<input id="input" type="text" value="1"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#input').change(function(){
slider.value=this.value
});
</script>
I would like to save in code space. Is there a short code I can enter in the 'onchange' inline to have the two range elements affect each other by moving just one of them?
<form onchange="">
<input type="range" value="0" id="rangeA" name="rangeA" min="-10" max="10">
</form>
<form onchange="">
<input type="range" value="0" id="rangeB" name="rangeB" min="-10" max="10">
</form>
You simply attach the same event handler to both forms. the event handler will simply check which form's range has changed, and will change the other form's range accordingly. you could theoretically have hundreds of those forms with ranges, and one of them will change the rest using this same event handler:
//on dom ready
$(function() {
//attach a change event listener to all forms
$("form").on("change", function() {
//for each of those forms do the following on change:
//assign a $currForm to point at the current form
$currForm = $(this);
//get a list of all other forms and change their range
//when the range of the current form changes
$("form").filter(function() {
//compares all forms with the current one and returns the others
return $(this) != $currForm;
}).children("input[type=range]").val($currForm.children("input[type=range]").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="range" value="0" id="rangeA" name="rangeA" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeB" name="rangeB" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeC" name="rangeC" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeD" name="rangeD" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeE" name="rangeE" min="-10" max="10">
</form>
I have a html block as follows with an input textfield that updates the entire application when it is manually edited.
How can I dynamically target and change this input text field? In the following this would be value="2"
<my-attribute param="Count" min="0" max="100" step="1">
<span id="label">Count</span><span id="input">
<dat-input-number id="input" value="2" step="1" min="0" max="100">
<div id="blocker" on-dblclick="" style="width: 152px; height: 15px;"></div>
<input id="number" type="text" on-keydown="">
</dat-input-number></span>
</my-attribute>
<script>
document.getElementById('number').value = "yourValueHere";
</script>
Oh, and don't forget to close your <input id="number" type="text" on-keydown=""> with an </input>
<script>
var theInput = document.getElementById('input');
theInput.value = '5';
</script>
Working demo here
Note: This is super trivial and I have no doubt that you could have found enough knowledge through a Google search to attempt this on your own. :)
Hey having a little trouble jquery and the hmtl5 range. I'm try to get the values as they changed but the event listener is not capturing it. Currently my code is:
HTML
html += '<li>Apply Credits: <input type="range" min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'
And the JS is:
$('#discount_credits').mousewheel( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
I've also tried
$('#discount_credits').change( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
Neither seem to work. Am I doing something wrong?
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
This fires the change event on every input event.
Does not seem to have any problem on HTML5 <input type="range"> using change.
See: http://jsfiddle.net/DerekL/BaEar/33/
I assume your span has an id: <span id="slidernumber">...</span>
Lets also assume that you have a few sliders, and you want to see a text change if any of them were moved:
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
</li>
<span id="slidernumber">50</span>
Try this:
$(document).ready(function(){
$("[type=range]").change(function(){
var newval=$(this).val();
$("#slidernumber").text(newval);
});
});
http://jsfiddle.net/MahshidZeinaly/CgQ5c/
Now lets assume that you have a few sliders, but you want to see a text change if a particular one of them were moved. (I assume it because the range input is inside li tag, and you gave it a name):
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
Try this:
$(document).ready(function(){
$("[type=range]").change(function(){
var newv=$(this).val();
$(this).next().text(newv);
});
});
http://jsfiddle.net/MahshidZeinaly/2pe7P/1/
The on change event seems to be working correctly for me: http://jsfiddle.net/zV3xD/7/
<input type="range" min="0" max="100" name="discount_credits" id="discount_credits" />
<span id="newValue" value="0">0</span>
$('#discount_credits').change( function() {
var newValue = this.value;
$('#newValue').html(newValue);
});
Or you can try something like this:
<form oninput="result.value=parseInt(a.value)">
<input type="range" name="a" value="50" /> =
<output name="result">0</output>
</form>
Using the output example here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output
Several test and bug fixed!
$('input[name=form_range]').change('mousestop',function () {
});