Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" />   
<table>
  <tr>
    <th colspan="4">Control panel</th>
  </tr>
  <tr>
    <td>
      <!-- attempting to retrieve value from the input field -->
      <input type="number" min="0" max="50" class="br-left" />
    </td>
  </tr>
</table>

<script>
    $(document).ready(function(){   
        $('.br-left').on("change",function(){
        $('#moon-photo').css('border-top-left-radius',$('.br-left').val());
    });
});
</script>

I am endeavoring to fetch the value from the number input and apply border-top-left-radius, but experiencing issues in achieving this.

javascriptjqueryhtmlcss

Answer №1

Keep in mind the importance of units.

Please Note: There is no need to re-select the input element within the css function, make use of the this keyword instead.

$(document).ready(function() {
  $('.br-left').on("change", function() {
    $('#moon-photo').css('border-top-left-radius', $(this).val() + 'px');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Purple moon" id="moon-photo" />
<table>
  <tr>
    <th colspan="4">Control panel</th>
  </tr>
  <tr>
    <td>
      <!-- extracting value from the input field -->
      <input type="number" min="0" max="50" class="br-left" />
    </td>
  </tr>
</table>

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

Showcasing a JSON attribute in the title using AngularJS

I'm struggling to display the Title of a table. Here is where I click to open a "modal" with the details: <td><a href="#" ng-click="show_project(z.project_id)">{{z.project}}</a></td> This is the modal that opens up with det ...

javascripthtmlangularjsjson

What steps are involved in implementing Local fonts in theme UI for Next JS?

I am currently developing an application using next JS with [theme-UI][1]. However, I need to implement local or custom fonts in my project and I'm unsure of how to do this. Below is the current theming setup: const theme = { fonts: { ...

javascriptreactjsnext.jstheme-ui

Flip the direction of this vertical CSS motion blur effect

Is there a way to modify this code so that the object can have a vertical motion blur instead of a horizontal one? I want it to move from top to bottom and then back up. Can anyone assist me with this? http://jsfiddle.net/db8gr4y6/ #outer { posit ...

htmlcsscss-transitionscss-animations

Unable to connect to server using React-Native fetch. Localhost is not being used

I recently encountered an issue with my app where the fetch function used for user authentication stopped working. Despite not making any changes, the transition from React 0.27 to 0.28 seemed to have caused this problem. After scouring through numerous S ...

javascriptiosreactjsreact-nativefetch-api

The input type file is not correctly inserting an image into the image tag

While I was working on a project, I had a question that got answered but now I need to find a different way to use the solution. I have created a jsFiddle to demonstrate how it currently works. You can view it here: http://jsfiddle.net/TbZzH/4/ However, w ...

javascriptjqueryimagefileinput

Steps to deactivate child rows in a Responsive Datatable using jQuery after pagination

Procedure steps: I followed a tutorial on how to render content in a responsive table, you can check it out here: https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer.html When I click on the expand button in any row on pag ...

jquerydatatable

What is the reason for receiving 'undefined' from await page.Evaluate() function call?

My attempt at creating a deploybot using nodejs is encountering an issue when trying to access the environments page, as it's unable to locate the button. The code snippet in question is as follows: //wait until element with unique id contain ...

htmlnode.js

What is the best way to ensure the right six-column DIV remains at the top in responsive web design?

I have implemented a custom 12-column grid and have created a row structure as follows: <div class="row"> <div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div> <div id="the-violet" class="lg-6 md-12 sm-12"&g ...

csssass

Manipulating CSS content property in React using Material UI

I am trying to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, However, the style is not being applied and I am seeing an ...

cssreactjsmaterial-ui

Is it possible to dynamically retrieve an element's style from @ViewChild in an Angular 2 component without needing an active approach?

For instance, there's an element in the template that uses a local variable #targetElement to retrieve its current width whenever needed. However, I prefer not to calculate the style programmatically. I attempted using a setter with the @ViewChild ann ...

javascriptangulartypescriptangular2-changedetection

Tips for adjusting the indentation of list items with CSS while working with floating blocks

Recently, I encountered a peculiar situation while working with floating images in a document. It seems that the list items indentation is being determined by the 'red line' rather than the expected 'green' one. I'm puzzled as to ...

csshtml-lists

What is the best way to submit a Redux Form only if there have been changes made to any of the fields

I'm currently using Redux Form version 7.1.2, and I have a form that submits data when the user clicks the submit button. In the function assigned to handle the submission, I perform an action. However, I only want this action to be executed if there ...

javascriptreactjsreact-reduxredux-form

Creating a persistent gap BETWEEN li inline list items

I'm seeking a solution to create horizontal links using a list. I know that I need to apply the display: block property to the ul element and set display: inline for the li items. While there are several inquiries about maintaining a consistent width ...

cssinlinehtml-lists

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...

javascripthtmlcssajax

Is it possible for a malicious party to modify the src attribute within an iframe?

My website incorporates IFrame on a page, loading different pages based on server-side logic. As such, the source code appears like this when viewed: <iframe src="DeterminedOnServerSide.aspx" id="myFrame"> </iframe> I am curious if there is a ...

asp.nethtmlsecurity

Easy steps to integrate React JSX using jQuery load function

I am facing a dilemma with loading files in my web app. I have a main file (master) that uses jquery .load() to call another file (loaded). While the javascript in the loaded file works perfectly, the jsx code seems to be getting ignored. Is there a way ...

jqueryajaxreactjs

I have a parent DIV with a child DIV, and I am looking to use jQuery to select the last child DIV. The parent DIV has an

In my HTML code, I have a parent div called "allcomments_4" which contains several child divs with unique IDs (oneEntry), each with their own children. My goal is to locate and retrieve the content inside the last child of the parent node (lastComment) and ...

javascriptjquerycss

Unable to fetch valid JSON from a different domain using JQuery and AJAX

I'm having trouble accessing a JSON api from a specific adult-themed website. I've been trying to make it work but so far no luck. You can find my code snippet in this jsfiddle: http://jsfiddle.net/SSqwd/ and here is the script: $.ajax({url: &ap ...

javascriptjqueryajaxjson

Techniques for transferring JavaScript variables within a URL using AJAX

Is there a correct way to pass the values of accesstoken and pageid inside the URL I am using? Any ideas on how to do it properly? <script type="text/javascript"> function makeUrl() { var accesstoken = "12345679|bababashahahhahauauuaua"; ...

javascriptjqueryajaxurl

Navigating through parent folder HTML files from child folder HTML files

Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...

javascripthtmlcss