CODEWITHSUNDEEP
javascripthtml
Brad Anderson
Brad Anderson

Reputation: 141

Trying to assign multiple onfocus events

I'm trying to get multiple onfocus events to happen, but I just cannot seem to get it to work. Only the first is picked up. 

<script>
function myFunction1(x) {
    x.style.background = "lightblue" 
} 

function myFunction2(x) {
    x.value.toUpperCase();
}
</script>

Enter your name: <input type="text" onfocus="myFunction1(this);myFunction2(this)">

The script is in between the head tags and does need to stay there. I'm sure I am just missing something simple, but it seems the simple things are always the hardest to figure out!

Upvotes: 1

Views: 1911

Answers (5)

Matus Dubrava
Matus Dubrava

Reputation: 14462

Well, you can always combine them into one event listener. That way you don't clutter up your html with inline js and you can easily extend your focus handling by just adding another function to the addEventListener's callback block.

function myFunction1(x) {
  console.log('fn1 running');
  x.style.background = "lightblue"
}

function myFunction2(x) {
  console.log('fn2 running');
  x.value.toUpperCase();
}

const inp = document.querySelector('input');
inp.addEventListener('focus', function() {
  myFunction1(this);
  myFunction2(this);
});
Enter your name: <input type="text">

And if you actually want to change the input value to upper case letters then you need to change this line 

x.value.toUpperCase();

like this

x.value = x.value.toUpperCase();

And if you want to automatically convert letters to upper case as they are being typed then you can use input event type for the second function instead of focus like this.

function myFunction1(x) {
  console.log('fn1 running');
  x.style.background = "lightblue"
}

function myFunction2(x) {
  x.value = x.value.toUpperCase();
}

const inp = document.querySelector('input');
inp.addEventListener('focus', function() {
  myFunction1(this);
});
inp.addEventListener('input', function() {
  myFunction2(this);
});
Enter your name: <input type="text">

Upvotes: 0

Ivan
Ivan

Reputation: 40698

It is working, the second function just doesn't return/log anything.

Use the onkeyup event:

function myFunction1(x) {
  x.style.background = "lightblue"
}

function myFunction2(x) {
  x.value = x.value.toUpperCase()
}
<input type="text" onfocus="myFunction1(this)" onkeyup="myFunction2(this)">

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

Your issue is in this line:

x.value.toUpperCase();

Change that line to:

x.value = x.value.toUpperCase();

You need to assign the result of toUpperCase() to the element.

function myFunction1(x) {
    x.style.background = "lightblue"
}

function myFunction2(x) {
    x.value = x.value.toUpperCase();
}
Enter your name: <input type="text" onfocus="myFunction1(this);myFunction2(this)">

You may also consider to use the three events:

  • onfocus
  • onblur
  • onkeyup

function myFunction1(x) {
  x.style.background = "lightblue"
}

function myFunction2(x) {
  x.value = x.value.toUpperCase();
}

function myFunction3(x) {
  x.style.background = "inherit"
}
Enter your name: <input type="text" onfocus="myFunction1(this)" onblur="myFunction3(this)" onkeyup="myFunction2(this)">

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 10148

Both of the function are being executed. You actually need to assign the value back to input with 

 x.value = x.value.toUpperCase();


function myFunction1(x) {
    x.style.background = "lightblue" 
} 

function myFunction2(x) {
    x.value = x.value.toUpperCase();
}
Enter your name: <input type="text" onfocus="myFunction2(this);myFunction1(this)">

But normally, I'd do by adding event handlers for that. here

Upvotes: 2

eltonkamami
eltonkamami

Reputation: 5190

Instead of using the very limiting inline event handlers, use addEventListener this way you can add multiple listeners on the same element for the same type of event and have a seperation of concerns(html and js)

example usage

let myElem = document.querySelector(".my-elem");
myElem.addEventListener("focus", (ev) => { // one handler });
myElem.addEventListener("focus", (ev) => { // another handler });

Upvotes: 0

Related Questions