Every time I click the + button I want the same input to display
The way I do it here works fine but seems like the worst way of doing it as just repeating the same code and changing the id's (also if I want for example 5 inputs I would have to repeat this code 5 times). What would be a better way of doing this?
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>
This will work for all the sliders. But you need to keep in mind a couple of things :
This will work only for the sliders that are already rendered in the DOM (even if they are hidden) if you render new sliders to the DOM you will need to attach the event listener as I did it in the foreach loop.
The input id (e.g "one") needs to match the output data-range="one"
function show3(){
document.getElementById('div2').style.display = 'block';
}
var sliders = document.querySelectorAll(".slider"); // slider = common class name
sliders.forEach(( slider ) => {
slider.addEventListener('input', (e) => {
const sliderId = e.target.id;
const output = document.querySelector(`[data-range=${sliderId}]`);
output.value = e.target.value;
});
});
<html>
<head>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider" id="one"/>
<p>Value(mm): <input type="text" data-range="one" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider" id="two"/>
<p>Value(mm): <input type="text" data-range="two" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
</body>
</html>
Might be easier to include the code in the element and clone it (parentNode is the div) :
<div>
<input type="range" min="0" max="1500" value="0"
oninput="this.parentNode.getElementsByTagName('INPUT')[1].value = this.value"/>
<p>Value(mm): <input type="text" size="10" /></p>
<button type="button"
onclick="this.parentNode.parentNode.append(this.parentNode.cloneNode(true))">+</button>
</div>
I would recommend you to create some kind of class which let you create slider components dynamically.
Here's a quick example (not optimized):
var SliderComponent = (function(doc) {
var defaults = {
containerSelector: 'body',
value: 0,
min: 0,
max: 1500,
inputSize: 10,
inputClass: 'special',
sliderClass: 'slider',
buttonClass: 'button'
}, options;
function SliderComponent(options) {
options = Object.assign({}, defaults, options || {});
this.container = getContainer(options);
this.input = createInput(options);
this.slider = createSlider(options);
this.removeButton = createButton(options.buttonClass, '-');
this.addButton = createButton(options.buttonClass, '+');
this.element = render.apply(this);
this.events = [];
this.events.push(
addEventListener.call(this, 'click', this.removeButton, function() {
this.destroy();
}),
addEventListener.call(this, 'click', this.addButton, function() {
new SliderComponent(options);
}),
addEventListener.call(this, 'input', this.slider, function(event) {
this.input.value = event.target.value;
}),
addEventListener.call(this, 'input', this.input, function(event) {
this.slider.value = event.target.value;
})
)
}
SliderComponent.prototype.destroy = function() {
this.events.forEach(function(e) {
e();
});
this.element.remove();
}
function addEventListener(name, element, listener) {
listener = listener.bind(this);
element.addEventListener(name, listener);
return function() {
element.removeEventListener(name, listener);
};
}
function getContainer(options) {
var container = doc.querySelector(options.containerSelector);
if(!container) {
throw new Error('Container for selector %s not found', options.containerSelector);
}
return container;
}
function createInput(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.setAttribute('size', options.inputSize);
input.classList.add(options.inputClass);
input.value = options.value;
return input;
}
function createSlider(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'range');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.classList.add(options.sliderClass);
input.value = options.value;
return input;
}
function createButton(klass, text) {
var button = doc.createElement('button');
button.setAttribute('type', 'button');
button.classList.add(klass);
button.textContent = text;
return button;
}
function render() {
var element = doc.createElement('div');
element.appendChild(this.slider);
element.appendChild(this.input);
element.appendChild(this.removeButton);
element.appendChild(this.addButton);
return this.container.appendChild(element);
}
return SliderComponent;
})(document);
var sliders = new SliderComponent();
Related
I have code that looks something like below. When I hit the reset button, I want my paragraph element to update to the default slider values, but they stay at the same value from before the reset. How can I make it so that the paragraph element reflects the reset slider value?
JSFiddle Link: https://jsfiddle.net/apshah/f6ymkcLe/
HTML:
<div class ='slidercontainer' id='slidercontainer'>
<form action method="POST" class="sliderform" id="sliderform">
<div class = "divslider" id="slider1">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange1">
<p>
<span class="sVal" id="val1">50</span>
</p>
</div>
<div class = "divslider" id="slider2">
<input type="range" min="1" max="10" value="5" class="slider" id="myRange2">
<p>
<span class="sVal" id="val2">5</span>
</p>
</div>
</form>
<div class="space1"></div>
<div class='buttonbox'>
<button type="submit" form="sliderform" class="sliderbutton" id="accept">Accept</button>
<button type="reset" form="sliderform" class="sliderbutton" id="reset">Reset</button>
<div class="space2"></div>
</div>
</div>
JavaScript:
document.body.onload = function(){
runSlider("myRange1", 'val1')
runSlider('myRange2', 'val2')
}
function runSlider(inputID, pID){
var slider = document.getElementById(inputID);
var output = document.getElementById(pID);
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
}
You should add another listener for this. I used setTimeout because of async.
document.body.onload = function(){
runSlider("myRange1", 'val1')
runSlider('myRange2', 'val2')
registerFormEvent()
}
function registerFormEvent() {
const formEl = document.querySelector(".sliderform");
const onFormReset = function(){
setTimeout(() => {
document.querySelector("#val1").innerHTML = document.querySelector("#myRange1").value;
document.querySelector("#val2").innerHTML = document.querySelector("#myRange2").value;
}, 0)
}
formEl.addEventListener("reset", onFormReset)
}
function runSlider(inputID, pID){
var slider = document.getElementById(inputID);
var output = document.getElementById(pID);
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
}
I'm learning Javascript right now and I got a problem (might be a small problem for you guys). Here is my code:`
<!DOCTYPE html>
<html>
<body>
<input type="number" id="number1" placeholder="like 0,25" />
<input type="number" id="number2" placeholder="like 200" />
<input type="number" id="number3" placeholder="like 0,30"/>
<button onclick="myFunction()">Try it</button>
<p style="padding: 10px;
width: 2em;
border:3px green solid;" id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("number1").value;
var y = document.getElementById("number2").value;
var z = document.getElementById("number3").value;
var ergebnis = Math.round(eval("(x*x*y)/(z*z)"));
var res = ergebnis;
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>
Now I want that "error" will be displayed when the button is clicked and there is an empty input field. And that the <p> will be first displayed, when the button is clicked. I know that I can hide the <p> but I don't know how to make it visible after the click again.
You need to evaluate the entered values
Add a block p to show an error.
If one field doesn't have value show the error.
If all fields contain data hide the error and show the result.
function myFunction() {
var x = document.getElementById("number1").value;
var y = document.getElementById("number2").value;
var z = document.getElementById("number3").value;
var ergebnis = Math.round(eval("(x*x*y)/(z*z)"));
var res = ergebnis;
if (x.trim() === '' || y.trim() === '' || z.trim() === '') {
document.getElementById("error").className = "";
return;
} else {
document.getElementById("error").className = "hide";
}
document.getElementById("demo").innerHTML = res;
document.getElementById("demo").style.display = '';
}
#error {
color: red;
}
.hide {
display: none;
}
<input type="number" id="number1" placeholder="like 0,25" />
<input type="number" id="number2" placeholder="like 200" />
<input type="number" id="number3" placeholder="like 0,30" />
<button onclick="myFunction()">Try it</button>
<p id="error" class="hide">
Some information is missing!
</p>
<p style="padding: 10px;
width: 2em;
border:3px green solid; display: none" id="demo"></p>
Hope it helps!
<!DOCTYPE html>
<html>
<body>
<input type="number" id="number1" placeholder="like 0,25" />
<input type="number" id="number2" placeholder="like 200" />
<input type="number" id="number3" placeholder="like 0,30"/>
<button onclick="myFunction()">Try it</button>
<p style="padding: 10px;
width: 2em;
border:3px green solid;display: none;" id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("number1").value;
var y = document.getElementById("number2").value;
var z = document.getElementById("number3").value;
var ergebnis = Math.round(eval("(x*x*y)/(z*z)"));
var res = ergebnis;
var resultbox = document.getElementById("demo");
if(x && y && z){
resultbox.innerHTML = res;
resultbox.style.display = "block";
resultbox.style.border = "3px green solid";
resultbox.style.color = "black";
} else {
resultbox.innerHTML = "error";
resultbox.style.display = "block";
resultbox.style.border ="none";
}
}
</script>
</body>
</html>
What you can try is to change the inner content wether are the values were found, also I would recommend you not use inline css/js, you can instead use event listeners.
Everytime the functions is called it will clear out the result.
var demo = document.getElementById("demo");
function myFunction() {
demo.innerHTML = '';
var x = document.getElementById("number1").value;
var y = document.getElementById("number2").value;
var z = document.getElementById("number3").value;
if(x && y && z){
var ergebnis = Math.round(eval("(x*x*y)/(z*z)"));
var res = ergebnis;
demo.innerHTML = res;
//You can also clear the inputs
x.value = '';
y.value = '';
z.value = '';
}else{
demo.innerHTML = 'Oops one empty imput!';
//Or delete the else if you don't want to show an error
}
}
document.querySelector('button').addEventListener('click', myFunction);
<input type="number" id="number1" placeholder="like 0,25" />
<input type="number" id="number2" placeholder="like 200" />
<input type="number" id="number3" placeholder="like 0,30"/>
<button>Try it</button>
<p id="demo"></p>
I am trying to make the sliders output the values depending on the which button has been clicked.
<!DOCTYPE html>
<html>
<body>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<input type="button" onclick="function1()" value="1">
<input type="button" onclick="function2()" value="2">
<input type="button" onclick="function3()" value="3">
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
function function1() {
var a = 'test1'
console.log('test: ' + a +' '+ slider.value);
}
function function2() {
var a = 'test2'
console.log('test: ' + a +' '+ slider.value);
}
function function3() {
var a = 'test3'
console.log('test: ' + a +' '+ slider.value);
}
</script>
</script>
</body>
</html>
As you can see for each of the buttons, the functions are being repeated and only the variable 'a' is being changed. I was wondering if there was a way to make this code more efficient, in other words shorter.
Please let me know if you have any solutions for this.
Thanks.
Well you could inspect the element that triggered the event to get it's associated value like this and to be consistant with yoru slider you can bind to all inputs with a special class like this:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var buttons = document.getElementsByClassName('button');
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
for(var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.onclick = function() {
var a = 'test'+this.value;
console.log('test: ' + a +' '+ slider.value);
}
}
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<input type="button" class="button" value="3">
There is no need to define the same variable again and again and multiple functions to perform the same task.
Use:
<input type="button" onclick="some_function('test1')" value="1">
<input type="button" onclick="some_function('test2')" value="2">
<input type="button" onclick="some_function('test3')" value="3">
to use the same function.
function some_function(a) {
console.log('test: ' + a +' '+ slider.value);
}
<!DOCTYPE html>
<html>
<body>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<input type="button" onclick="function_name('test1')" value="1">
<input type="button" onclick="function_name('test2')" value="2">
<input type="button" onclick="function_name('test3')" value="3">
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
function function_name(a) {
console.log('test: ' + a +' '+ slider.value);
}
</script>
</body>
</html>
let slider = document.getElementById('myRange');
let output = document.getElementById('output');
let setOutputHTML = function (value) {
output.innerHTML = value;
};
let setSliderValue = function (e) {
slider.value = e.currentTarget.value;
slider.dispatchEvent(new Event('input'));
};
slider.addEventListener('input', function (e) {
setOutputHTML(e.currentTarget.value);
});
setOutputHTML(slider.value);
Array.from(document.querySelectorAll('[type="button"]'))
.forEach(function (input) {
input.addEventListener('click', setSliderValue);
});
<div>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="output"></span></p>
</div>
<input type="button" value="25" name="field_slug" />
<input type="button" value="50" name="field_dlug" />
<input type="button" value="75" name="field_flug" />
Basically, just pass this to the function and since the value indicated on the button is what is different for each button, we just concatenate that to 'test' and pass that to the string.
<!DOCTYPE html>
<html>
<body>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<input type="button" onclick="setSliderValue(this)" value="1">
<input type="button" onclick="setSliderValue(this)" value="2">
<input type="button" onclick="setSliderValue(this)" value="3">
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
function setSliderValue(button) {
var value = button.value
var testType = 'test' + value;
console.log('test: ' + testType +' '+ slider.value);
}
</script>
</body>
</html>
i'm trying to do an price counter synchronizing with increment and decrement buttons, but the price is not changing when i click one of the buttons (+/-) this is not working, how can i solve this issue? Thanks!!!
$('#plus').click(function add() {
var $qtde = $("#quantity");
var a = $qtde.val();
a++;
$("#minus").attr("disabled", !a);
$qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());
$('#minus').click(function minust() {
var $qtde = $("#quantity");
var b = $qtde.val();
if (b >= 1) {
b--;
$qtde.val(b);
}
else {
$("#minus").attr("disabled", true);
}
});
/* On change */
$(document).ready(function()
{
function updatePrice()
{
var price = parseFloat($("#quantity").val());
var total = (price + 1) * 1.05;
var total = total.toFixed(2);
$("#total-price").val(total);
}
$(document).on("change, keyup, focus", "#quantity", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value=""/>
If you change your binding to update whenever there is a click on an input, you'll get the behavior that you are expecting.
$('#plus').click(function add() {
var $qtde = $("#quantity");
var a = $qtde.val();
a++;
$("#minus").attr("disabled", !a);
$qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());
$('#minus').click(function minust() {
var $qtde = $("#quantity");
var b = $qtde.val();
if (b >= 1) {
b--;
$qtde.val(b);
} else {
$("#minus").attr("disabled", true);
}
});
/* On change */
$(document).ready(function() {
function updatePrice() {
var price = parseFloat($("#quantity").val());
var total = (price + 1) * 1.05;
var total = total.toFixed(2);
$("#total-price").val(total);
}
// On the click of an input, update the price
$(document).on("click", "input", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value="" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="sp-quantity">
<div class="container" style=" font-size:14px; ">
<div class="sp-input">
<input type="text" class="quantity-input" value="1">
<div class="button" style="cursor: pointer;">
+
</div>
<div class="button" style="cursor: pointer;">
-
</div>
</div>
<p>custom filed</p>
<div class="sp-input">
<input type="text" class="quantity-input-db" value="1.8" step="1.8">
<div class="button" style="cursor: pointer;">
+
</div>
<div class="button" style="cursor: pointer;">
-
</div>
</div>
</div>
</div>
<script type="text/javascript">
// debugger;
$(document).ready(function () {
$(".button").on("click", function() {
var $db_value = $('.db_value').val();
var $quantity = $('.quantity_input').val();
var db_valu_fix = 1.8;
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quantity-input");
var oldValue_q = $input.val();
var $db_value = $button.closest('.sp-quantity').find("input.quantity-input-db");
var oldValue_db = $db_value.val();
console.log(oldValue_db);
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue_q) + 1;
newdbVal = parseFloat(oldValue_db) + 1;
//newdbVal.toFixed(2);
}
else {
if (oldValue_q > 0) {
newVal = parseFloat(oldValue_q) - 1;
newdbVal = parseFloat(oldValue_db) - 1;
newdbVal = Math.round(newdbVal * 100) / 100;
} else {
newVal = 1;
}
}
$input.val(newVal);
$db_value.val(newdbVal);
});
// $(".ddd").on("click", function(step) {
// var a=$(".quantity-input").val();
// var attr=$(".quantity-input").attr(step);
// var getValue=a/1;
// console.log(attr);
// });
});
</script>
</body>
</html>
How can you create a button so that whenever you click on it a question changes to its uppercase form, then when you click the button again it changes to its lowercase form. I believe I should create a function of some sort, just not sure how. Below is what I have tried so far:
function upper_lower() {
if (windows.document.f1.value=="lower") {
windows.document.value = "UPPER"
windows.document.question = windows.document.question.toUpperCase();
windows.document.queston.size="40"
} else {
windows.document.value = "lower"
windows.document.question = windows.document.question.toLowerCase()
windows.document.queston.size="30"
}
}
Question
<input type="text" name="question" value="Favorite food?" size="25">
readonly /input
<input type="button" name="f1" value="UPPER" onClick = "upper_lower">
Try this
Html:
Question <input type="text" name="question" id="question1" value="Favorite food?" size="25" readonly></input>
<input type="button" name="f1" id="button1" value="UPPER" onClick="upper_lower()"></input>
js:
var toggle = true;
function upper_lower(){
var question = document.getElementById('question1'),
button = document.getElementById('button1');
if(toggle){
question.value = question.value.toUpperCase();
button.value = 'LOWER';
toggle = false;
} else{
question.value = question.value.toLowerCase();
button.value = 'UPPER';
toggle = true;
}
}
Snippet below (indented weird for some reason)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
Question <input type="text" name="question" id="question1" value="Favorite food?" size="25" readonly></input>
<input type="button" name="f1" id="button1" value="UPPER" onClick="upper_lower()"></input>
</body>
<script>
var toggle = true;
function upper_lower(){
var question = document.getElementById('question1'),
button = document.getElementById('button1');
if(toggle){
question.value = question.value.toUpperCase();
button.value = 'LOWER';
toggle = false;
} else{
question.value = question.value.toLowerCase();
button.value = 'UPPER';
toggle = true;
}
}
</script>
</html>
Try This Updated Code...
<script type="text/javascript">
var flag = 0;
function changecase() {
if (flag == 0) {
document.form1.instring.value = document.form1.instring.value.toUpperCase();
document.form1.Convert.value = 'To Lower'
flag = 1;
}
else
{
document.form1.instring.value = document.form1.instring.value.toLowerCase();
document.form1.Convert.value = 'To Upper'
flag = 0;
}
}
</script>
<form name="form1" method="post">
<input name="instring" type="text" value="this is the text string" size="30">
<input type="button" name="Convert" value="To Upper " onclick="changecase();">
</form>