We Keep Coding

How to add attribute to class with js?

So I am trying to autofill the discount code section on a page. The class I am calling is button before. If I try to press enter it isn't applying the code, because the value wasn't saved somehow. However, filling it out manually addes this attribute to the class: after entering code manually. The site I am trying to apply discount on is luisaviaroma.com you can try the FF25 code, if you are interested in helping me with some code. I figured out that simply adding a space after the code my hand is solving the issue, is there a way to make this space press automated to (inside of js)?
function test() {
var element = document.querySelector("div[data-attribute='promo-code-input']")
var input = document.querySelector("input[name='promo-code-input']");
//element.setAttribute('class', 'InputText__baseCls___Hg_ik4cV2- InputText__focus___5q7tEpbHwI InputText__filled___1s5BW_63Y3');
element.classList.add("InputText__filled___1s5BW_63Y3");
console.log(element)
input.focus();
setTimeout(function () {
input.focus();
input.value='FF25';
let event = document.createEvent("HTMLEvents");
event.initEvent('change', true, false);
element.dispatchEvent(event);
element.blur();
}, 300)
input.select();

Although there is a KeyboardEvent the spec recommends input for text inputs.
In this case setting the bubbles attribute to true does the trick.
function test(val) {
var input = document.querySelector("input[name='promo-code-input']");
var inputEvent = new Event('input', {
bubbles: true,
})
input.focus();
input.value = val;
input.dispatchEvent(inputEvent)
console.log(input)
}

How to change my js function from on click of enter to when i click submit button

I have a js script that I am extending to meet my needs as I'm still pretty new to JavaScript and have tried a few things but cant seem to get them to work.Here is part of JavaScript script if more is needed I can put more of it up.What I would like to do is have it work exactly the same way but instead of hitting the enter key i want to have the user click submit (or a button that looks like submit would work too) with their mouse.
(function () {
'use strict';
var ENTER_KEY = 13
var auditor = document.getElementById('auditor');
var date = document.getElementById('date');
var location = document.getElementById('location');
var workers = document.getElementById('workers');
var contact = document.getElementById('contact');
Where ENTER_KEY gets used (for second time)
function newTodoKeyPressHandler( event ) {
if (event.keyCode === ENTER_KEY) {
addTodo(auditor.value,date.value,location.value,workers.value,contact.value,company.value,exposureLocation.value,workersExposed.value,exposures.value,interventions.value,interventionComments.value,additionalComments.value,programManagement.value);
auditor.value = '';
date.value= '';
location.value = '';
workers.value = '';
contact.value = '';
company.value = '';
exposureLocation.value = '';
workersExposed.value = '';
exposures.value = '';
interventions.value = '';
interventionComments.value = '';
additionalComments.value = '';
programManagement.value = '';
}
}
If anyone could help to accomplish this I would greatly appreciate it. I already know ill have to change event.keyCode to something else but the things I tried were to no avail. Thanks

So if I understand correctly, your newTodoKeyPressHandler is being invoked on press of a keyboard button.
Basically, you need to define an event handler for mouse click and then add a listener for the same as follows:
document.getElementById('button').addEventListener(
'click',
mouseClickHandler,
false
);
// mouseClickHandler Function
function mouseClickHandler(event){
... (handler code, same as in the keypress handler)
}

there a few ways of doing this you can try this first
<button onclick=" newTodoKeyPressHandler()">Click me</button>
you create the button with a onclick attribute and set the function to do that but you may need to add return false to prevent default action in the form from posting and reloading the page.

press key inside an input box

I am filling up a login form using
document.getElementById('i0116').value = email;
document.getElementById('i0118').value = password;
document.getElementById('idSIButton9').click();
Now the problem starts when form is identifying that the value is not filled by any key event, I mean the placeholders remains there even if I fill the form and on submit it says fields are empty.
I was trying to fix it by firing a keypress event on input box before I fill the value. but I am not able to do it.
I tried :
var target = document.getElementById('email');
var evt = document.createEvent("Events");
evt.initEvent("keypress", true, true);
evt.view = window;
evt.altKey = false;
evt.ctrlKey = false;
evt.shiftKey = false;
evt.metaKey = false;
evt.keyCode = 0;
evt.charCode = 'a';
target.dispatchEvent(evt);
also instead of "Events" I tried "UIEVENTS" and "KEYEVENTS" none of them helped , I am using chrome browser.

Just got the hang of what you really are seeking to achieve. You can clear off the placeholder value onClick() and restore the placeholder value using onBlur(), something like the following
function clearPlaceholder(id){
document.getElementById(id).placeholder = "";
};
function restorePlaceHolder(id, placeHolderText){
document.getElementById(id).placeholder = placeHolderText;
};
<input id="10116" placeholder="email" onClick="clearPlaceholder('10116')" onBlur="restorePlaceHolder('10116','email')">
<input id="10118" placeholder="password" onClick="clearPlaceholder('10118')" onBlur="restorePlaceHolder('10118','password')">
Is that what you were looking for?

My Issue was resolved using:
var element = document.getElementById('idTxtBx_SAOTCC_OTC');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
It was knockout js, because of which just setting the value of element was not working.so I was trying to keypress.
chanage event triggers "textInput" for knockoutjs, Instead of just setting .value attribute.

How Do I check if I'm holding/changing an input slider?

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"

In JavaScript how to have a readonly textarea and still get onselect events?

I have noticed that if I set a textarea to 'readonly'
I no longer get onselect events.
var ta = document.createElement('textarea');
ta.readonly = true;
ta.onselect = function() { ... } // This one works only if the ta.readonly is commented out.
I need the textarea to be readonly and be notified when the user selects a certain range.
Can somebody help?

There is no straightforward way to do this by dynamically adjusting the textarea's readonly attribute onfocus, onblur, onselect, etc. while still always receiving the onselect event.
If your goal is to make sure that users cannot edit/manipulate the textarea, then I would probably just leave the textarea as non-readonly (to receive the select events) but block all user input inside of it by using preventDefault() on input events, like so:
var ta = document.createElement('textarea');
// prevent user input
ta.addEventListener('cut', function(e) { e.preventDefault(); }, false);
ta.addEventListener('copy', function(e) { e.preventDefault(); }, false);
ta.addEventListener('paste', function(e) { e.preventDefault(); }, false);
ta.addEventListener('keydown', function(e) { e.preventDefault(); }, false);
// listen for user selections
ta.addEventListener('select', function() {
// function logic...
}, false);

How about just using a <div>? You can still select text in there, and it'll be non-editable, hence readonly.

You could make a loop function that keeps checking for window text selection. If it detects that the length of the select text has reached some sort of limit it will execute what ever you see fit.
Something like this:
function getSelectedText() {
var txt = '';
if (window.getSelection) {
txt = window.getSelection();
}
else if (document.getSelection) // FireFox
{
txt = document.getSelection();
}
else if (document.selection) // IE 6/7
{
txt = document.selection.createRange().text;
}
return txt;
}
function doSomething() {
var txt = getSelectedText();
// Do something with txt variable, like txt.length
}
setInterval('doSomething()',500);
You would also need to make sure the selection is from the desired textarea.
Hopefully this will point you in the right direction.