Is there a way to modify the CSS style of both an input and text simultaneously using a single function?

Users input data and then see the calculated result.

Is it possible to change the CSS style of the text, "Fe," including its color and font-family, as well as the background-color of the input field simultaneously?

I attempted the following:

function convcase(word) { 
document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
    if(document.convert.Fe.value < 10){
    document.getElementById("Fe_t").style.color="red";}
    else { document.getElementById("Fe_t").style.color="blue";
    };
}

However, I'm unable to access the Fe_b id or change the font-family of the text.

<td id='Fe_t'>Fe</td> <td id='Fe_b'><INPUT TYPE=TEXT NAME="Fe" DISABLED></td>

Could jquery be used to achieve this effect?

javascriptjquerycssdynamiccolors

Answer №1

If you want to manipulate the input using jQuery, simply use $("#Fe_b input"). An efficient way to set multiple CSS properties at once is by passing an object with the desired property values to the css() function:

function convcase(word) { 
 document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
  if(document.convert.Fe.value < 10){
   $("#Fe_t").css("color","red");
   $("#Fe_b input").css({"background":"grey","font-family":"fantasy"});
  }
  else {
   $("#Fe_t").css("color","blue");
   $("#Fe_b input").css({"background":"white","font-family":"sans-serif"});
  };
}

Answer №2

By utilizing pure Javascript, you have the ability to access the input element using the getElementsByTabName method in this way:

document.getElementById("Fe_b").getElementsByTagName('input')[0].style.color = 'red';

An array of input elements will be returned, and by specifying [0], you can choose the first one.

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

Describe a Typescript Interface Value as a collection of strings or any input provided as an argument

Uncertain if the question title is accurate - currently developing react components within a library that has specific predefined values for certain properties. However, additional values may need to be added on a per usage basis. So far, this setup is fun ...

javascriptreactjstypescriptcomponents

Steps for assigning an id to an element using Selenium

When using Selenium, you have the ability to access the underlying DOM of the browser being manipulated through IWebElement instances. For example: IWebElement domWrapper = driver.FindElement(By.Name("q")); But what if you have the "domWrapper" instance ...

c#javascriptselenium

What is the reason behind why create-react-app generates the App.js file as a functional component?

Learning React has been quite fascinating for me. I recently used npx create-react-app my-project and noticed that the App.js file was created as a functional component, instead of a class component like in previous versions. After digging around, I stumbl ...

javascriptreactjscreate-react-app

Run the setInterval function immediately on the first iteration without any delay

Is there a way to display the value immediately the first time? I want to retrieve the value without delay on the first load and then refresh it in the background. <script> function ajax() { ...

javascriptajax

The capacity to rotate div containers, adjust their dimensions, and engage with the content within

I'm attempting to design small clickable div boxes that flip 180° when clicked to reveal interactive content. This includes the ability to click links, copy text, or manipulate the content with additional buttons. Although I've successfully ach ...

javascripthtmlcss

Using a color as a substitute for a background image on mobile devices

Is there a way to create a fallback in my CSS for changing the background image to a color when viewed on a mobile browser once the pixels reach the max-width? In the snippet below, the media query "only screen and (max-width: 600px)" works if the top bod ...

htmlcss

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

It may sound a bit confusing at first, but essentially I have some dynamically generated HTML that resembles the following: <body> <div class="component" id="465a496s5498"> <div class="a-container"> <div class="random-div"> ...

javascriptjqueryhtmlcssalgorithm

JavaScript's failure to properly handle UTF-8 encoding

Here is a snippet of code that I found on Stack Overflow and modified: <?php header('Content-Type: text/html; charset=ISO-8859-1'); $origadd = $_SESSION["OriginAdd"] // $_SESSION["OriginAdd"] contains the value "rueFrédéricMistral"; echo $o ...

javascriptphpjsonhtml

Is it possible to refresh only a specific table on a Razor site without reloading the entire page?

Greetings! I am currently working on a table and facing an issue. Currently, I am unable to update the table without the website refreshing. I require a solution that will allow me to easily Add, Delete, or Modify rows in the table's content. This ...

c#jqueryajaxrazorasp.net-mvc-4

What is the process behind Stackoverflow's "Congratulations, you've earned a new badge" popup window?

Possible Duplicates: Custom notify box similar to StackOverflow Creating popup message like StackOverflow How does StackOverflow implement the "You earned a new badge" window? (the orange one that pops up at the top of the screen, I believe it&ap ...

javascriptajaxnotifications

Changing the positions of objects on a resized HTML Canvas

I am currently developing a tool that allows users to draw bounding boxes on images using the Canvas and Angular. Everything was working smoothly until I encountered an issue with zooming in on the canvas causing complications when trying to draw bounding ...

javascripthtmlangularhtml5-canvas

What sets apart the following: ( import React from "react"; ) and ( import React from 'react'; )?

When it comes to imports, is there a distinction between using single quotes (') versus double quotes ("), for example in import React from 'react'; and import React from "react";? Are there any notable differences? ...

javascriptnode.jsmern

Unexpected error: the process is not recognized

I am currently working with node.js to develop a web application. Upon running the application (either by opening index.html in the browser or executing "npm start" in the terminal), I encounter two errors: Uncaught ReferenceError: process is not defined ...

javascriptnode.jsprocessmodulenpm

What is the best method for gracefully opening external links in a reusable new tab?

Here is the progress I have made so far: <script> var win; function OpenInNewTab(url ) { // var win; if (win) { win.close(); } win =window.open(url, 'myWin'); win.focus(); } </script> My links are structured like ...

htmljavascripthyperlinkanchor

Using AngularJS to hide elements within a nested dictionary structure

My dictionary structure is as follows: var data = { a: [1, 2, 3, 4, 5], b: [ [1, 2], [3, 4], [5, 6] ] }; Currently, I am using ng-hide to hide an element if the value 2 exists in data->a. Here's how it's implemented: <i ...

javascriptangularjsangularjs-ng-repeatangularjs-filterangularjs-ng-show

Using various iterations of the identical dependency in a React project

Let's say we have a react application called A, which renders a component called B. The two of them are using an npm dependency with version 1.0. Now, the need arises to upgrade the version of this dependency in B to 1.1. Since the updated version has ...

javascriptnode.jsreactjsnpmnpm-install

How can I add a custom column to the ajax data when using AJAX, jQuery, and the Datatables plugin?

Utilizing AJAX / PHP to fetch data into a table for display via the DataTable JS plugin. The data query functions correctly, but I want to include an additional column for each record with buttons for previewing / editing / deleting the respective record. ...

phpjqueryajaxdatatables

Pictures glide within containers

Hey, I'm having an issue with my images. They're not floating like they should be, even though they are centered in the div. I really want them to float and be centered. Here's the code snippet I've been working with. HTML <div cla ...

htmlcss

Issue: function is not a valid type (during mount)

Currently, I'm trying to add a feature that automatically closes all menus and modals when a user clicks outside of the specified area. Although I am successfully calling this.closeMenu(), an error is occurring stating that this.closeMenu is not reco ...

javascriptvue.js

"An error occurs when attempting to retrieve data from a specific column, as it is

Errors: Warning: Undefined index: id in C:\wamp64\www\app\Form_Edit_Appt.php on line 16 Warning: Undefined index: id in C:\wamp64\www\app\Form_Edit_Appt.php on line 33 The issue arises at Line 16 where I set $I ...

javascriptphpajax