Passing parameters to a function triggered by a DOM event

I am struggling to pass an argument to a function during a JavaScript event.

When the drop-down menu is focused, the text changes based on the argument passed to the function call.

I can't seem to get this functionality to work! Any assistance would be greatly appreciated.

function adjustText(value) {
  if (value) {
    document.querySelector('.focused').textContent = 'Focused';
  } else {
    document.querySelector('.focused').textContent = 'LOST';
  }
}

document.querySelector('.selector').onfocus = function() { adjustText(true); };
document.querySelector('.selector').onblur = function() { adjustText(false); };

<select class='selector'>
  <option value='one'>One</option>
  <option value='two'>Two</option>
</select>

<br/>
<br/>
<br/>

<div class='focused'>XXX</div>

javascriptcssonfocus

Answer №1

Modifications made: In order to enhance your function, I encapsulated it within anonymous functions. To resolve the issue of "onfocusout" not triggering upon losing focus, I switched to using addEventListener('focusin'/'focusout').

function modifyContent(y) {
  if (y) {
    document.querySelector('.focused').textContent = 'Focused';
  } else {
    document.querySelector('.focused').textContent = 'LOST';
  }
}

document.querySelector('.selector').addEventListener('focusin',function(){ modifyContent(true); });
document.querySelector('.selector').addEventListener('focusout',function(){ modifyContent(false); });
<select class='selector'>
  <option value = 'one'>One</option>
  <option value = 'two'>Two</option>
</select>

<br />
<br />
<br />


<div class = 'focused'>XXX</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Contrast the values across various template sections

Due to specific requirements, I need to apply a bit of styling (margin) to the footer of the page. This styling should only be visible when the content section of the page is a product archive. I attempted to create a variable in the archive-products.php ...

phpcsswordpress

Execute function periodically using Vue.js

I have a requirement to update data periodically by calling a function in my Vue.js application. I am looking to call the 'listar()' method every 30 seconds and store the response in a property of vue js. If anyone can guide me on where to locat ...

javascriptvue.jsvue-componentvuetify.js

What is the best method for accessing OpenWeatherMap details via JSON?

I am facing a challenge in JavaScript as I attempt to create a program that fetches weather information from OpenWeatherMap using JSON. My experience with JSON is limited, but I believe I have a grasp of the underlying concepts. Despite this, when I trigge ...

javascriptjsonopenweathermap

React Enzyme Issue: Unable to access the property 'propTypes' as it is undefined

Here is a simple React Component I have created: import React from 'react' var PageLeftLower = React.createClass({ render:function(){ return(<a href="#">Quote Requests</a>); } }); module.exports = PageLeftLower; I am new t ...

javascriptnode.jsreactjsmocha.jsenzyme

"Troubleshooting: Vue ChartJS Line Chart fails to show data

Hey there! I'm currently working on integrating Chart.js with the vue-chartjs wrapper to build a Line Chart using data retrieved from my API. The data is being successfully logged to the console without any errors, but for some reason, the Line Chart ...

javascriptvue.jschart.jsvue-chartjs

The Autocomplete feature from the @react-google-maps/api component seems to be malfunctioning as it returns

I'm encountering some difficulties with the Autocomplete component in @react-google-maps/api. While Autocomplete is working and displaying options, clicking on an option fills the input box but I'm only getting 'undefined' from the Plac ...

javascriptreactjsgoogle-maps

The custom CSS classes are being taken over by Antd styles through the use of useServerInsertedHTML in next.navigation

Initially, I encountered a problem where the antd styles on my page were taking 1 to 2 seconds to load, causing my page to render incorrectly during that time. However, thanks to the helpful guidance provided in this answer about the solution to the slow A ...

cssreactjsnext.jsantdserver-side-rendering

When the canvas is in full screen mode, my div elements are hidden

Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...

javascripthtmlcssthree.js

Inspired by the organization and depth provided by nested lists

I am facing an issue with my ul list where adding a nested ul causes the li items above to move. Can anyone explain why this is happening and suggest a solution? Here is an example: http://jsfiddle.net/y5DtE/ HTML: <ul> <li> first ...

htmlcsshtml-lists

Tabulator: Adding a new row with merged columns in Tabulator

Is there a method to insert a new row in Tabulator that spans multiple columns? view image here I am looking for something similar to this, where data is displayed across more than one column. I need to incorporate additional details retrieved from an aj ...

javascripttypescriptdatatabletabulator

A guide to resizing a canvas correctly in React with the help of p5.js

Currently, I am working on a project that involves resizing the model in the canvas when the canvas or window is resized. I have consulted the documentation for resizeCanvas() and implemented it. To achieve this, I first determine the ratio by dividing th ...

javascriptreactjscanvasp5.js

Upon refreshing the page, Vuex encounters an issue where it is unable to read

My website has a Navbar component that utilizes values from the Vuex store. Prior to entering each route, I trigger a dispatch from Vuex as shown below: router.beforeEach((to, from, next) => { //... store.dispatch("updateUserData"); ...

javascripthtmlcsstypescriptvue.js

The Three.js raycaster fails to intersect with objects once they have been displaced from their original position

I am encountering an issue with the raycaster: When I place an object at the origin (0, 0, 0), the raycaster can detect it. However, if I move the object to a different position, like (0, 300, 0), the raycaster no longer hits the object. I have double-ch ...

javascriptmatrixthree.jsraycasting

Python on the server side generating a downloadable zip file

After passing a parameter from my client to a python script on the server through a GET request, the script initiates a process that results in the creation of a zip file. However, upon making an AJAX call in my client-side JavaScript, I am only able to co ...

javascriptpythonajax

What methods are available to generate dynamic shapes using HTML?

Looking to create an interactive triangle where users can move vertices or sides, updating angles in real-time. I'm struggling with how to accomplish this task. My initial attempt was to manually draw the triangle using the code below. <!DOCTYPE ht ...

javascripthtmlcss

How can I retrieve the latest state of the Redux store in getServerSideProps in Next.js?

I am attempting to retrieve the most up-to-date redux state in getServerSideProps like so: export const getServerSideProps = async (ctx) => { const state = store.getState(); console.log(state.name); return { props: { login: false } }; }; H ...

javascriptreactjsreduxnext.jsserver-side-rendering

Grouped validation of redux form fields using nesting

Is this usage of redux-form Fields considered valid? const ValidatedFieldGroup = (props) => { const {meta: {touched, error}} = props return ( <div className={touched && error ? 'has-error' : ''}> <Fiel ...

javascriptreactjsredux-formredux-form-validators

Utilizing Modifier Keys in jQuery for Form Submission

Imagine having a form structured like this: [ Animal name input field ] Add button Currently, when a name is entered and the enter key is pressed, a new animal with that name is added to a table. Now, I want to introduce a new feature called "slow add" ...

javascriptjqueryhtmleventsforms

Browser-agnostic script proxy

Currently, I am working on client-side Javascript which interacts with JSON web services from a different domain. I've learned that certain browsers don't permit cross-domain scripting, so it's recommended to set up a proxy on my local serve ...

asp.netjavascriptweb-servicescross-domain

Is there a way to retrieve the JavaScript constructor object by passing it as a parameter in an IIFE function?

In my first method, I have successfully created an object constructor called Person. Inside this constructor, I used an IIFE function expression which is functioning correctly. The property inside this function of Person is accessible! var Person = fun ...

javascriptjquery