I have to validate via javascript, no jquery, if the user is currently changing an input slider. I can find nothing in slider reference.
any tips are welcome thanks
var slider = document.getElementById('slider');
var output = document.getElementById('output');
var isSliding = false;
slider.addEventListener('input', function () {
isSliding = true;
output.innerHTML = isSliding;
});
slider.addEventListener('mouseup', function () {
isSliding = false;
output.innerHTML = isSliding;
});
jsfiddle: http://jsfiddle.net/z9bkurra/
If I understand you correctly, you could do something like this.
As your 'slider' is an <input type="range"/> you can listen for change-events.
document.getElementById('mySlider').addEventListener('change', function () {...});
See http://devdocs.io/dom_events/change "The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value"
Related
I have an element on the page that looks like:
<textarea id="note-content" rows="4"></textarea>
when I try to write some jQuery to add some text to it:
$('#note-content').val('hi')
The button to "submit" the value is still greyed out.
I've tried
function setKeywordText(text) {
var el = document.getElementById("note-content");
el.value = text;
var evt = document.createEvent("Events");
evt.initEvent("change", true, true);
el.dispatchEvent(evt);
}
setKeywordText("test")
as a way to "simulate" sending keystrokes to the browser, but that doesn't seem to work either.
any thoughts?
You can do that by javascript
<script>
function changetext(){
document.getElementById("note-content").value = "hi";
}
<script>
It should def. work. Plus what exactly did you mean by browser simulation?
Am i missing something?
It appears this problem is occurring because your button is disabled.
To solve this you'd remove the disabled attribute using jQuery.fn.removeAttr, like this:
$("#button-id").removeAttr("disabled");
Add this solution it to your vanilla JavaScript code, like this:
function setKeywordText(text) {
// disable button
var btn = document.getElementById("button-id");
btn.disabled = false;
// set input value
var el = document.getElementById("note-content");
el.value = text;
// create and dispatch the event
var evt = document.createEvent("Events");
evt.initEvent("change", true, true);
el.dispatchEvent(evt);
}
// run the function
setKeywordText("test");
Good luck.
Using the pen below you can see there are two elements, a button and a checkbox input.
When the button is clicked I would like to determine the status of checkbox (clicked/not-clicked).
Regardless of the visual check mark presence or not, the console always logs false. Why is this?
https://codepen.io/sterlingbutters/pen/ZEGGgvm
EDIT (code):
HTML:
<input id='stall' type="checkbox">
<button id='button'>Test
JS:
var stall = document.getElementById('stall').checked;
var button = document.getElementById('button');
button.onclick = function () {
console.log(stall);
}
You have to reasign stall on button click.
So Using
button.onclick = function () {
var stall = document.getElementById('stall').checked
console.log(stall);
}
It works fine.
Try this instead: assign the element to the variable, and then inside your onclick function you get the checked property every time it runs.
If you just store the boolean value of checked in a variable, it will never update. Primitive types like booleans are always stored as simple values, not as auto-updating references back to the original property.
var stall = document.getElementById('stall');
var button = document.getElementById('button');
button.onclick = function () {
console.log(stall.checked);
}
<input id='stall' type="checkbox">
<button id='button'>Test
Once you assigned "stall", it won't be re-assiged in "button.onclick". You must re-assign, such as
var button = document.getElementById('button');
button.onclick = function () {
var stall = document.getElementById('stall').checked;
console.log(stall);
}
or better
var stall = document.getElementById('stall');
var button = document.getElementById('button');
button.onclick = function () {
console.log(stall.checked);
}
When user clicks on an img i want to add it's alt value into textarea and add a space to it as if user pressed it himself but not like this el.value += ' ';
Code :
var chatInput = document.querySelector('textarea[data-a-target="chat-input"]'); //textarea selector
var chatSend = document.querySelector('button[data-a-target="chat-send-button"]');
emoteList.addEventListener('click', function(e){
if(e.target.nodeName == 'IMG'){
chatInput.focus();
chatInput.value += e.target.alt;
}
})
The text gets added into textarea, but textarea change event doesn't fire.
What would be the best way to do this? I have spent hours using both Javascript and jQuery to make it work using events but i can't get it right.
I tried focusing on textarea and using dispatch/fire event on window but it does nothing.
I tried firing keypress on textarea but it has no effect either.
if your problem is that change event is not triggering then you can manually trigger it by
var e = $.Event( "change" );
$("#altArea").trigger(e);
Don't need jQuery for this - just use chatInput.dispatchEvent(new Event('change'));.
const chatInput = document.querySelector('textarea');
chatInput.addEventListener('change', () => {
console.log('saw a change');
})
const chatSend = document.querySelector('button');
document.querySelector('#emote-list').addEventListener('click', (e) => {
if(e.target.nodeName !== 'DIV') return;
chatInput.focus();
chatInput.value += 'foo ';
chatInput.dispatchEvent(new Event('change'));
})
<textarea></textarea>
<div id="emote-list">click</div>
I am trying to do something really simple using only Javascript (not JQuery).
Basically, I want to use a checkbox to toggle the text in a textarea. So if the checkbox is unchecked I want it to say "Hello" in the textarea. If the checkbox is checked, the textarea should say "Goodbye".
I'm just getting started with Javascript, so any help would be appreciated.
Thanks
Here is the code:
var myswitch = document.getElementsByTagName("myonoffswitch");
var mytextarea= document.getElementsByTagName("mytextarea");
myswitch.onchange = function(){
if(this.checked){
mytextarea.value = "Hello"
}else{
mytextarea.value = "Goodbye"
}
}
If your controls are in a form, you can do something really simple like:
<form>
<textarea name="ta"></textarea>
<input type="checkbox" onclick="
this.form.ta.value = this.checked? 'Hello':'Goodbye';
">
</form>
Note that using the change event with a checkbox means that in some browsers, the event won't be dispatched until the checkbox loses focus, so better to use the click event.
You should be using document.getElementById instead of getElementsByTagName
I can't tell from your code snippet if you've wrapped your code in an onload function. This is required in situations where your DOM elements are not loaded in the HTML at the time your javascript is running
Here's an example
window.onload = function () {
var myswitch = document.getElementById("myonoffswitch");
var mytextarea = document.getElementById("mytextarea");
myswitch.onchange = function () {
if (this.checked) {
mytextarea.value = "Hello";
} else {
mytextarea.value = "Goodbye";
}
}
//code here
}
And a fiddle is available here: http://jsfiddle.net/C4jVG/
I've tried something. This should work for you
HTML
<input type="checkbox" id="myonoffswitch">Switch</input>
<textarea id="mytextarea" cols="30" rows="10"></textarea>
Javascript
function fillText() {
var myswitch = document.getElementById("myonoffswitch");
var mytextarea= document.getElementById("mytextarea");
myswitch.onchange = function(){
if(this.checked){
mytextarea.value = "Hello"
}else{
mytextarea.value = "Goodbye"
}
}
}
window.onload = fillText;
Just try replacing getElementsByTagName in your code with getElementById this will solve your problem.
I have uploaded the HTML / CSS / JS at: http://jsfiddle.net/mbender/aH8Ax/
I know the problem probably lies within the JS, as i have almost no experience with it.
$(function () {
var $promised = $("input[name='RadioGroup1']");
$promised.each(function () {
$(this).on("click", function () {
$promised.each(function () {
var textField = $(this).nextAll("input").first();
if (textField) textField.prop("disabled", !this.checked);
});
});
});
});
There is also a conditionally hidden element to work around. You will see what i mean in the fiddle
The input field is disabled whenever the attribute 'disabled' is present in the tag, it doesn't matter what the value is set to. What you can do is loop through all the input elements inside of the USA section and call
.removeAttribute('disabled');
if the user selects the USA radio button.
EDIT: something like this should work (as long as you have JQuery)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type=text/javascript>
$(function() {
var $promised = $("input[name='RadioGroup1']");
$promised.each(function() {
$(this).on("click",function() {
var USARadio = document.getElementById("RadioGroup1_0");
if(USARadio.checked == true){
toggleUSA(true);
}
else{
toggleUSA(false);
}
});
});
});
function toggleUSA(disable){
var USATable = document.getElementById("rowThree");
var USAInputs = USATable.getElementsByTagName("input");
for(var i=0;i<USAInputs.length;i++){
if(disable == true)
USAInputs[i].removeAttribute("disabled");
else
USAInputs[i].setAttribute("disabled", "true");
}
}
</script>