Home/ Questions/Q 9179103
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:42:51+00:00

This should be a fairly easy problem, but I don’t know how to solve

  • 0

This should be a fairly easy problem, but I don’t know how to solve it and haven’t found any appropriate answer to what I’m trying to do.

I have an html file with some text that, in very simple terms, has a string and two radio buttons. So something like this:

    <html>
    <head>
      <title>Some title</title>
      <script src="jquery.js"></script>
    </head>
    <body>

      <div id="main">
         <p> 10 GB </p>
      </div>

      <div class="radioButtons" style="width: 100%">
        <p><input type="radio" name="radioLessGB" value="Less" align="absmiddle"/> I want less gigabytes(-3GB) </p>
            <p><input type="radio" name="radioMoreGB" value="More" align="absmiddle"/> I want more gigabytes (+5GB)</p>
      </div>
   </body>
   </html>

I need a way to update the value of the text (i.e. “10 GB”) depending on the radiobutton that is selected. In particular, when the user selects the first radio button the integer value in the string above should go down by 3 right away (i.e. “10 GB” – 3 = “7 GB”), and if the user selects the second radio button, the integer value should add 5 (i.e. “10 GB” + 5 = “15 GB”).

To do this I guess I have to parse the string “10 GB” to get the Integer value and then add or subtract depending on the radiobutton chosen. Then update the string with the result.
I don’t want the user to click on some kind of “submit” button, the update of the number should be done ‘on-the-fly’ as the user toggles between radiobuttons.

I think this could be done with jQuery, I just don’t know the way about it. Could someone more experienced help with sample code for a simple solution?!?

Thanks!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using jQuery, you can simply do it as follows. try the DEMO HERE

    $("input").change(function() {
    $("#main").text((10 + parseInt($(this).val())) + " GB");
});

    If you need to do this in pure javascript, use the following. try DEMO HERE

    function valChanged(ele) {
    document.getElementById('main1233').textContent = (10 + parseInt(ele.value)) + " GB";
}
    • 0