Question

Is it possible to use jQuery to modify HTML plaintext?

For example, in this specific case, if I have a time of 18:00 showing in plan HTML text, is it possible to have a drop down list with options for +1, +2, +3 and so forth, or -1, -2, -3 and so forth so that when one of these options is selected, the time changes to 17:00 or 19:00 or whatever depending on the option selected?

If this is possible, what kind of jQuery code would I use, and would there is any limitation? A demonstation on jsFiddle would be appreciated so I can see the code in action, if possible.

The time will be getting pulled from a database using PHP, but it would be displayed in plain HTML text with, perhaps, some CSS styling on it.

Answer 1

So far as I can tell PHP has no part to play in this solution, since it’ll be client-side (given the JavaScript requirement), however one method, using jQuery with the following HTML snippet:

<span id="time">18:00</span>
<select name="modTime" id="modTime">
    <option value="-3">-3</option>
    <option value="-2">-2</option>
    <option value="-1">-1</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

jQuery:

var curTime = $('#time').text(),
    curTimeHH = parseInt(curTime.split(':')[0],10);
$('#modTime').change(
    function(){
        var modifyBy = parseInt($(this).val(),10);
        curTimeHH = curTimeHH + modifyBy;
        $('#time').text(curTimeHH + ':00');
    });

JS Fiddle demo.

---

Edited in response to question from OP (in comments, below):

…but it should always add or subtract relative to the original value, if that makes sense. And when you select “0” it should go back to what it originally was. Is that possible?

Yeah, that’s possible; it’s all about making sure the original time is stored somewhere accessible (you could use just a regular JavaScript variable, but I’m choosing instead to store it in a HTML5 data-* attribute:

var curTime = $('#time').text(),
    curTimeHH = parseInt(curTime.split(':')[0],10);
$('#modTime').change(
    function(){
        $(this).attr('data-originalTime',curTime);
        var modifyBy = parseInt($(this).val(),10);
        curTimeHH = parseInt($(this).attr('data-originalTime'),10) + modifyBy;
        $('#time').text(curTimeHH + ':00');
    });

JS Fiddle demo.

References:

• jQuery, from the jQuery API:
  • .attr().
  • .change().
  • .text().
• JavaScript, from the Mozilla Developer Network’s JavaScript resource:
  • parseInt().
  • split().