I am currently working on a dynamic progress bar that should fill up everytime I click on the button(Meaning increasing the width of the element inside the bar container), The way I am doing it is like that:
let btn = document.getElementById('click');
let adj = add_bar.style.width = "";
btn.addEventListener('click', ()=>{
adj = "10%";
})
And I have done some other attempts, but they all ended up with the same result.
can you give me hints at least?
thank you
The reason your code is not working is because you are setting the width to 10% every time you click it, rather than incrementing.
Instead, use +=:
let add_bar = document.querySelector('progress');
let btn = document.getElementById('click');
btn.addEventListener('click', function() {
add_bar.value += 10;
})
<progress value="0" min="0" max="100"></progress>
<br/>
<button id="click">Increase Progress</button>
Related
I need create button which count click but make every time new string. I have that function with scope which make count every time when I click, but I cannot understand, why in HTML it every time count zero, should be like this:
(Verticaly every click make new string with updated count)
1
2
3
4
...
<form action="#">
<input type="button" value="Count" onclick="add_count()">
</form>
function add_count() {
let integer = (function () {
let counter = 0;
return function() {return counter++;};
}());
let tag = document. createElement("p");
let text;
text = document. createTextNode(integer());
tag. appendChild(text);
let element = document. getElementsByTagName("body")[0];
element. appendChild(tag)};
You just need to move the counter initialization outside of the function scope
I've tweaked your code a bit.
Note: try not using inline event listeners, instead use event listeners in JavaScript file
let counter = 0;
const button = document.querySelector('input');
function add_count() {
let integer = (() => counter++);
const tag = document.createElement("p");
const text = document.createTextNode(integer());
tag.appendChild(text);
const element = document.body
element.appendChild(tag)
};
button.addEventListener('click', add_count)
<form action="#">
<input type="button" value="Count">
</form>
I'm trying to programmatically update the position of my input slider (type="range").
I'm setting the value, however, that won't update the position of the slider.
I've also tried using:
element.dispatchEvent(new Event('input'))
to force an input change. This event does fire, however, the slider won't visually update.
function changeSliderPosition(position) {
let e = document.getElementById('mySlider');
e.value = position;
//Also set the position of the slider to position
}
I've seen some solutions that work in JQuery, but I don't want to include an entire library or even use it at all for such a seemingly small issue.
I'd appreciate any help with this problem!
Assuming that your slider (input type="range") has its min and max attributes set, all you need to do is set the value:
let input = document.getElementById("in");
let btn = document.querySelector("button");
let slider = document.querySelector("input[type='range']");
btn.addEventListener("click", function(){
slider.value = input.value;
});
Enter the value you want: <input id="in"><button>Go!</button><br>
<input type="range" min="1" max="100">
What i want it to do is add an additional div every time the add button is clicked. what happens instead is it adds it once and then never runs through the code again. I have tried printing out the count and it increments once and never populates again. If i delete the code about inserting the div the count increments every time the button is clicked. What am i missing here?
var count = 0;
button.onclick = function()
{
popup.document.body.innerHTML += '<div id="queryPart-'+ count+'"></div>';
count = count + 1;
};
here is the whole code block
var popup = open("", "Popup", "width=600,height=200,top=600,left=200");
//var div = popup.document.createElement("DIV");
//div.id = "div";
popup.document.body.innerHTML += '<div id="queryPart-0"></div>';
var div = popup.document.getElementById("queryPart-0");
queryLine(div);
var button = popup.document.createElement("BUTTON");
var t = popup.document.createTextNode("ADD");
button.id = "addbutton";
button.onclick = function()
{
popup.document.body.innerHTML += '<div id="queryPart-'+ count+'"></div>';
count= count + 1;
};
button.appendChild(t);
div.appendChild(button);
You should use Node.appendChild() instead because DOM manipulation is a better approach. You only want to add to the existing document, without obstructing or disturbing other elements. By appending directly to the HTML of the body, you are disassociating the original button with the click handler.
Googling this issue returns many helpful resources:
https://www.google.com/#q=innerhtml+removes+listener
After a bit on redirecting, I found one of the first questions related to this issue, here on Stack Overflow:
Is it possible to append to innerHTML without destroying descendants' onclick functions?
Broken
var button = document.getElementById('addBtn');
var count = 0;
button.onclick = function() {
console.log('click');
document.body.innerHTML += '<div class="queryPart-'+ count+'">' + count + '</div>';
count++;
};
<input type="button" id="addBtn" value="Press Me" />
Corrected
var button = document.getElementById('addBtn');
var count = 0;
button.onclick = function() {
var queryDiv = document.createElement('DIV');
queryDiv.className = 'queryPart-' + count;
queryDiv.innerHTML = count;
document.body.appendChild(queryDiv);
count++;
};
<input type="button" id="addBtn" value="Press Me" />
You could also...
set the outerHTML of a div, so that you don't have to create the Element as you see in the above example.
var button = document.getElementById('addBtn');
var count = 0;
button.onclick = function() {
var queryDiv = document.createElement('DIV');
document.body.appendChild(queryDiv);
queryDiv.outerHTML = '<div class="queryPart-'+ count+'">' + count + '</div>';
count++;
};
<input type="button" id="addBtn" value="Press Me" />
This is happening because of the way innerHTML works.
(get) .innerHTML -> "Enumerate all of the elements in this DOM into "HTML" format, and return it as a string"
(set) .innerHTML = -> "Destroy all elements in this DOM, and then create new ones using the HTML that has been provided."
You're destroying your button, and its event listener, during the set operation. You'll likely want to create your button using a more manual method, like document.createElement, and then append it using myElement.appendChild. These operations are pretty common, so I don't think it would make sense to give a full tutorial here - this could also be easier with a framework like JQuery, which has many methods for adding new DOM elements.
Looks like you messed up the order of the
" and '
try:
var count = 0;
button.onclick = function()
{
popup.document.body.innerHTML += '<div id="queryPart-'+ count + '"></div>';
count = count + 1;
};
I have a JavaScript variable:
var setClickTime = "2000";
I would like to give the user a choice of 2000 or 4000 based on their preference by clicking a button.
What is the best way to allow the user to change this variable? I have considered having two buttons one of which will have the class active when clicked. That would require me to set up an if / else statement to change the variable based on which button is active. But I am new to this and I do not know the best approach.
Just give your buttons IDs and bind listeners.
Say, you have two buttons id="setTime2000" and id="setTime4000", then you just need:
HTML Code:
<div>
<button id="setTime2000">Set time as 2000</button>
<button id="setTime4000">Set time as 4000</button>
</div>
JS Code:
$(document).ready() {
var mTime = 2000; // set the default value of time
$("#setTime2000").click(function () {
mTime = 2000;
}
$("#setTime4000").click(function () {
mTime = 4000;
}
// ... do something with the variable set
}
Do you just want a button event listener to change it:
<button id="changeBtn">4000</button>
JS
var setClickTime = "2000";
$("#changeBtn").click(function() {
setClickTime = "4000";
})
First, you have a JavaScript variable, it has nothing to do with jQuery.
Then, if you want something easy, without dependencies. Here a simple example:
var myValue = 2000;
updateOutput();
a.addEventListener('click', function() {
myValue = 2000;
updateOutput()
});
b.addEventListener('click', function() {
myValue = 4000;
updateOutput()
});
function updateOutput() {
output.value = myValue;
}
<button id="a">2000</button>
<button id="b">4000</button>
<input readonly id="output">
A generic answer in pure javascript.
<button class='setTime'>
2000
</button>
<button class='setTime'>
4000
</button>
Pure Javascript:
var setClickTime = "";
var buttons = document.getElementsByClassName('setTime')
for (i = 0; i < buttons.length; i++) {
this.onclick = function setTime(event) {
setClickTime = event.target.innerHTML;
alert(setClickTime);
}
}
fiddle: https://jsfiddle.net/b1vy8ahp/
You can define multiple radio buttons for more options ( with same name attribute to group them ) and then just delegate or bind a change event on that group of radios buttons to get the selected value.
<input type="radio" name="test" value="2000">2000
<input type="radio" name="test" value="4000">4000
<script>
var setClickTime;
$('input:radio[name=test]').on('change',function()
{
setClickTime = this.value;
});
</script>
Example : https://jsfiddle.net/DinoMyte/71hgeqnb/1/
I have a html slider and I want to dynamically change the position of the cursor on the slider.
Look at here my jsfiddle demo : http://jsfiddle.net/8DCS6/
<input type="range" id="slider" min="0" max="14" value="14" />
<input type="button" id="b" value="Update slider"/>
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.onclick = function() {
slider.setAttribute("value","10");
};
I put the max value to the 14 and I have a button. When I click on the button, I want to change the position of the cursor and for that, I change the attribute value to to 10 but the cursor doesn't move. But if I click on the cursor, the cursor moves but it's not really what I want because I just want to change the attribute value and see the move for the cursor.
Somebody have an idea to do this ?
I'm searching only a pure javascript solution because I'm using js_of_ocaml (http://ocsigen.org/js_of_ocaml/). I want to have a javascript to translante in js_of_ocaml.
Try this:
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.addEventListener("click", function() {
slider.value = 10;
})
Not sure if there is a better way, but here is a workaround in the mean time:
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.onclick = function() {
var container = slider.parentNode;
slider.remove();
container.innerHTML = '<input type="range" id="slider" min="0" max="14" value="12" />' + container.innerHTML
};