connect the value of an input to the style of a different element

I'm struggling with the following code snippet

<input id="in" value="50px"/>
<div id="out">this is my output</div>

Could anyone guide me on how to use jQuery to bind the #in value to the #out's font-size?

Considerations:

a) I also require compatibility with the version provided in this CodePen example: 

$(function() {  
  $("#out").css("fontSize", $("#in").val());

  $("#in").on("input", function(e) {
    $("#out").css("fontSize", $("#in").val());
  });

  $("#in").val("5px"); // should update the font size! 
});

b) The script must handle changes when browser autofills the values.

javascriptjqueryhtmlcssbinding

Answer №1

When the event (keyup) is triggered, you need to utilize the .css function from JQuery to apply your CSS.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="in" value="18px"/>
<div id="out">this is my output</div>
<script>
$('#in').on('keyup', function () {
    $('#out').css({'font-size':$(this).val()});
});
</script>

Answer №2

Implement the .css method from JQuery library

$('#in').keyup(function() {
  $("#out").css('font-size', $('#in').val()+"px")

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="in" value="18" />
<br><br>
<br>

<div id="out">this is my output</div>

Answer №3

You can achieve this functionality using vanilla JavaScript:

const input = document.querySelector("#input");
const output = document.querySelector("#output");

input.addEventListener("keyup", function(){
  output.style.fontSize = input.value + "px";
})
<input id="input" type="text" placeholder="enter a value">
<div id="output">this is the result</div>

Answer №4

Take a look at this demo:

Prior to adjusting the font size, be sure to verify the input data:

<input id="size" value="24px"/>
<div id="text">Here is the text</div>  
$(function() {
    $("#size").on('input', function(e){
        $("#text").css("fontSize", $("#size").val());
    });
});  
https://jsfiddle.net/abc123def456/2/

Answer №5

let input = document.querySelector("#inputField");
let output = document.querySelector("#outputField");

input.addEventListener("change", function(){
  output.style.fontWeight = "bold";
})
<input id="inputField" type="text" value="15">
<div id="outputField">this is the result</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

Failed to input data into the database

I created a modal window with a form that should submit the field data to the database without closing the modal window. It should then display a message saying "You have been RSVP'd" before fading out the modal window. There are 2 issues: 1) After ...

phpjavascriptmysql

Differences between using Array.from and a for loop to iterate through an array-like object

When traversing an array-like object, which method is more efficient for performance: using Array.from( ).forEach() or a traditional for loop? An example of an array-like object would be: let elements = document.querySelector('#someid').children ...

javascriptarraysperformance

Display a random div element in jQuery without specifying a specific class

I have a dynamic list that I am displaying in a div as shown below <div class="cards card1"> <div class="front"> <p>Front 1</p> </div> <div class="back1" style="display: none"> <p>Back 1</p> ...

javascriptjqueryhtmlcss

Difficulty in accurately retrieving the value in a PHP echo statement using jQuery

$id = "123"; When on the page book.php, $id is passed to an external jquery-book.php file. <script type="text/javascript"> var id = '<?php echo $id; ?>'; </script> <script type="text/javascript" src="jquery-book.php"& ...

phpjavascriptjqueryajax

A TypeError is thrown when attempting to use window[functionName] as a function

I came across this page discussing how to call a function from a string. The page suggests using window[functionName](params) for better performance, and provides an example: var strFun = "someFunction"; var strParam = "this is the parameter"; //Creating ...

javascriptjquery

Mastering the Art of jQuery Function Chaining for Beginners

I want to change the name and ID of an element when a radio button is clicked. To avoid duplication of the selector, I tried setting it up this way: $( "#selectOther" ).click(function() { $( "[field=primaryInput]" ).attr('id', "modifiedId", ...

javascriptjquery

What is the best way to incorporate external CSS files into AMP?

Struggling to load external CSS files such as bootstrap.css and other stylesheets into an HTML file that is AMP-compatible. I've scoured the AMP documentation but have yet to find a solution. As a newcomer to both AMP and SEO, I need to implement SEO ...

cssamp-img

Even though my performance in a sandbox environment is excellent, I am unable to obtain a token in a production environment

After posting my question on the Evernote developer forum, I was disappointed to find that the forum had been closed before I received a response. Even after receiving a proposal from an Evernote employee named chanatx to verify if my key was activated co ...

javascripthtmloauthevernotemonaca

What is the best way to incorporate an if else condition using the <?php if($loggedin): ?> statement within JavaScript code to display a button push or pop response from the server side?

I would like to verify this php if condition code ''<?php if($loggedin) : ?>'' inside JavaScript code in order to display one of the buttons, either push or pop. I want to keep this button hidden from the client side by embedding ...

javascriptphpajax

Encountering an error in React when attempting to convert a class component to a function

As I've been converting my class components to functions, I encountered a hook error related to my export default. Although I believe it's a simple issue, I can't seem to find the solution I need. The following code is where the error occur ...

javascriptreactjsreduxmaterial-uireact-hooks

Using Jquery AJAX to request data in either JSON or TEXT format

Seeking guidance on extracting the TEXT from the getsku javascript function after submission, but unsure of the exact method. 1) How can I fetch the POST data? 2) How can I retrieve and post multiple variables back, especially if they are of type text? 3 ...

phpjqueryhtmlajaxjson

Unexpected results can occur when using ngClass and CSS with all unset

Within my Angular 4 project, I am utilizing ngClass on an object that contains a CSS class applied with unset: all within it. Despite knowing that ngClass adds its properties, the expected result was for all values to be unset and the style elements from n ...

htmlcssangular

Safari's iOS appears to be causing a striped effect on Bootstrap fonts

I have developed a straightforward application utilizing Bootstrap version 3.3.5 and included a button with a dropdown feature: <!-- Large button group --> <div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" typ ...

ioscsshtmltwitter-bootstrap

Sending the appropriate context using "this" to an external function within a class

Imagine a scenario where I have a simple class that extends other classes, and an object of functions that I am passing to class B const actions = { doSomething: (this: B, foo: boolean) => { console.log('from do something', this.text, ...

javascripttypescriptclassthis

Sleek dialog sliding animation with Svelte

I'm struggling with a svelte component that I have and I'm trying to implement a slide down animation when it closes. The slide up animation is functioning correctly, but for some reason the slide down animation is not working. Does anyone have a ...

javascripthtmlcsssvelte

The react+redux component's componentDidMount() function gets triggered multiple times

In my project using react+redux, I generated static files xx.html and xx.js. When attempting to load these files with jQuert.load(), I noticed that the componentdidmount() function was being called repeatedly. The issue arose because I loaded redux data i ...

jqueryreactjsreduxjquery-events

React: Implementing localStorage token addition in loginHandler function using State hook is not functioning as expected

I've implemented an AuthContextProvider in my React application to handle user authentication and logout functionality: import React, { useState } from "react"; import axios from "axios"; import { api } from "../api"; co ...

javascriptreactjslocal-storagereact-contextreact-state

Having difficulty passing a PHP variable to JS for updating an SQL file through PHP call

Having some difficulties with this issue. I am trying to transfer a PHP variable to JavaScript. The JavaScript then sends the variable to a php file like domain.com/updatesql.php?userid=USERNAME. Here's my index.php file which successfully passes the ...

javascriptphpmysql

Using jQuery's append function, you can dynamically generate a dropdown list in PHP code

One of the challenges I'm facing is related to a button that, when clicked by a user, should append a dropdown list to the HTML. I am using PHP to retrieve data from a database and fill the dropdown list with it. However, upon trying out this code, it ...

phpjqueryhtml

Enhance the appearance of the initial row in the v-data-table component within vuetify

I have utilized the Vuetify data table component to define the table shown below. My current challenge involves figuring out how to make the first row of the table appear in bold. Specifically, I want the text of the first item record to be bold. Any ass ...

cssvue.jsvuetify.js