Develop Reference

how to change element function with js

i have a <input type="text"/> which is to perform two functions. Which function is executed is to be decided via a button. This button should toggle the onkeyup function. For this I used the following:
document.getElementById('input-search-tags').onkeyup = filter_tagsC()
but when I click the button, the function will not change.

To toggle between which function fires onkeyup you need a click event listener on the button to set which function needs to be run.
const input = document.querySelector("input")
const button = document.querySelector("button")
let functionState = "one"
const oneFunc = () => console.log("one")
const twoFunc = () => console.log("two")
input.onkeyup = oneFunc
const toggleFunctions = () => {
if (functionState === "one") {
input.onkeyup = twoFunc
functionState = "two"
} else {
input.onkeyup = oneFunc
functionState = "one"
}
}
button.addEventListener("click", toggleFunctions)
<div>
<input type="text" />
<button>Toggle function</button
</div>
With this example, I get both elements with querySelector. Then I set a state value with let so that its value can be changed. Then I define the 2 functions I want to toggle between. I also set the input to have onkeyup of oneFunc, since the functionState starts as one.
Then I define a function that will assign a different function to onkeyup depending on the state of functionState and reset the functionState to the new value. Lastly, I add an event listener to the button to run the toggleFunctions function on click.

You need to specify that you are calling a function onKeyUp and then specify that function's name:
document.getElementById('input-search-tags').onkeyup = function() {filter_tagsC()}
function filter_tagsC() {
// Your Code Here.
}
For an an easier method of handling onkeyup, I would suggest looking at the keyup event listener method, as it is a bit more logical way of handling events. Hope this helps.

How can I click on one element and listen for a change in another element's value?

upon clicking element with attribute 'data-one' above, an update to an email field's value occurs. how can I detect if there was a change - the new update? note that there is an async process that updates the email address post-clicking
$('a[data-one]').on('click', function() {
$('input#field_email_address').on('change', function() {
console.log('email value was change detected');
});
});

Move the change event code out of the click event code and in the click event code just update the email field as needed.
But, you'll need to manually trigger the change event of that field because change only fires when the field loses focus, which it won't if done with code.
$('a[data-one]').on('click', function() {
$('input#field_email_address').val("CHANGED!");
$('input#field_email_address').trigger("change");
});
$('input#field_email_address').on('change', function() {
console.log('email value was changed');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Test
<input id="field_email_address">

Right now you are adding a change event listener every time that you click on the a[data-one] button.
You can check the value of the email field by using the .val() method. Compare the current value against a previously stored value and see if it differs. If it does, store the new value and log your message.
var emailValue = '';
$('a[data-one]').on('click', function() {
var newEmailValue = $('input#field_email_address').val();
if (emailValue !== newEmailValue) {
console.log('email value was changed');
emailValue = newEmailValue;
}
});

Is there a way to create an element and bind an event to it?

Is there a way I could use JavaScript to create an element, that when a user writes in it (oninput) I could display the text in the console? For example, it would be something like this:
<textarea oninput="print(this);"></textarea>
<script>
function print(e) {
console.log(e.value);
}
</script>
My function is a little bit more complex but you get the idea. What I want is to create the <textarea> element using JavaScript and then set an input event on it and pass it the this object.

This should explain the procedure pretty clearly:
// Selects an existing element in the DOM
const theParentElement = document.getElementById("container");
// Makes our new element
const newTextArea = document.createElement("textarea");
// Adds the new element to the DOM
theParentElement.appendChild(newTextArea);
// Calls printText when the textarea receives key input (or actually, ANY input)
newTextArea.addEventListener("input", printText);
// The listener gets a reference to the triggering event. Let's call it `event`
function printText(event){
// The event's `target` property holds the element where the event happened
const localReferenceToTheTextArea = event.target;
// The text of a textarea element lives in its `value` property
const text = localReferenceToTheTextArea.value;
console.log(text);
}
<div id="container"></div>

You could do this:
var textarea = document.createElement("textarea");
Then bind an event listener to your newly created element:
textarea.addEventListener("input", function () { /*Do the thing*/ });
That way, the event listener would always be binded to the element you've created.
I hope this helps you in some way. :)

if I understood you correctly you can do something like this
var myTextarea = document.createElement("textarea")
myTextarea.setAttribute("oninput", "print(this);")
// we get something like this => <textarea oninput="print(this);"></textarea>
document.body.appendChild( myTextarea )
console.log(myTextarea)
or you can use javascript EventListener
var myTextarea = document.createElement("textarea")
/* add the textarea to the body */
document.body.appendChild( myTextarea )
/* when we can use EventListener */
myTextarea.addEventListener("input", ()=>{
/* do something with value*/
console.log( myTextarea.vlaue )
})

<textarea id="area"></textarea>
<script>
const textArea = document.getElementById("area"); // Defines `textArea`
textArea.addEventListener("input", e => {
console.log(e.target.value);
});
</script>

Well first, you put set a variable to the element you want to create. In your case, <textarea>
var textareaElement = document.createElement("textarea");
Then, set the oninput like this:
textareaElement.setAttribute("oninput", "print(this)");
Lastly, add the element to the body:
document.body.appendChild(textareaElement);
Put together:
function print(e) {
console.log(e.value);
}
var textareaElement = document.createElement("textarea");
textareaElement.setAttribute("oninput", "print(this)");
document.body.appendChild(textareaElement);

vue.js element selected by focus is not reactive

I have a listener to check what input was selected at last to add some kind of string/variable later into it.
created: function () {
document.addEventListener('focusin', this.focusChanged);
}
focusChanged(event) {
if (event.target.id !== 'variable-search') {
this.lastElement = event.target;
}
}
This seems to work fine, and when I click on an input field this.lastElement gets updated with the focused element. All these inputs have a v-model which can be a string in an object or just a plain string.
Now the thing is when I try to update the value by:
this.lastElement.value += variable;
Vue won't detect its changes, also in the Vue Developer tools the string won't get updated. But in the input field it does get updated. So this should be a reactivity thing.
When I add a new character into the input field (v-model) it does update again. So it's just when I update the string by this.lastElement it won't register its changes.
The thing is that the input fields are dynamic, so I don't know how many input fields are here and how many lists etc. So I need Vue to re-render the variable after the value of lastElement is updated.
Edit
I just tried it with an #focus here an example
<input v-model="testVar" #focus="lastElement = testVar">
If I update lastElement later on it doesn't update it for testVar but just for lastElement.

Changing values in DOM elements programmatically does not cause DOM events to fire. v-model relies on input (or change when using .lazy) events to update its bound variable. If you dispatch those events when you update the value in an input, the variable will react.
new Vue({
el: '#app',
data: {
items: ['one','two','three']
},
methods: {
addAddress() {
this.lastElement.value += 'address';
this.lastElement.dispatchEvent(new Event('input'));
this.lastElement.dispatchEvent(new Event('change'));
},
focusChanged(event) {
this.lastElement = event.target;
}
}
})
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<div v-for="item, index in items">
<input v-model="items[index]" #focus="focusChanged">
{{item}}
</div>
<button type="button" #click="addAddress">+address</button>
</div>

You could add a ref attribute to each of the inputs and use the ref to update their values. For example, an input element could be:
<input v-model="testVar" ref="input1" id="input1" #focus="focusChanged">
In your methods:
methods: {
focusChanged(event) {
if (event.target.id !== 'variable-search') {
this.lastElement = event.target.id;
}
},
}
And where you want to update the value: this.$refs[this.lastElement].value += variable;

Polymer core-input committedValue event

I'm using the attribute committedValue of core-input element of Polymer like this:
<paper-input is="core-input" type="text" name="data_in" id="data_in" value="{{current_data_in}}" committedValue="{{committed_data_in}}"></paper-input>
It works fine, and it solves the problem of listening to some keypress + blur events to determine the input is "committed".
My problem is that I'd like to erase the contents of the input box value after the value were committed. I can't find any way to listen to this event.
Is there any built-in event that being triggered after a value is committed?

Ok, I found a way to do it and it includes observing the committedValue like this:
<script>
Polymer('chat-element', {
ready: function() {
this.committed_data_in = "";
this.current_data_in = "";
},
observe: {
'committed_data_in': 'modelUpdated'
},
modelUpdated: function(oldValue, newValue) {
console.log(oldValue, newValue);
}
});