How to replace comma with dot in Javascript

Question

I have a html select element with multiple options, when selected javascript will display specific input field(s). In these fields I have javascript function that changes comma (,) to dot (.)

The problem is, only input field with id #size will work, when others are selected, nothing changes. I'm using jQuery.

Here's full code in JSFiddle

<select id="switch" name="switch">
  <option value="">Select...</option>
  <option value="size">Size</option>
  <option value="weight">Weight</option>
  <option value="dimensions">Dimensions</option>
</select>

<div class="switch-body">
<!-- javascript content goes here -->
</div>

Javascript:

$(document).ready(function() {
    $("#switch").change(function() {
        //if selected option is size
        if ($(this).val() == "size") {
            $(".switch-body").html('<input type="text" id="size" placeholder="Product Size">');
        }
        //if selected option is weight
        else if ($(this).val() == "weight") {
            $(".switch-body").html('<input type="text" id="weight" placeholder="Product Weight">');
        }
        //if selected option is weight
        else if ($(this).val() == "dimensions") {
            $(".switch-body").html(`
            <input type="text" id="height" placeholder="Product Height">
            <input type="text" id="width" placeholder="Product Width">
            <input type="text" id="length" placeholder="Product Length">
            `);
        }
        //if selected option is none
        else if ($(this).val() == "") {
            $(".switch-body").html("");
        }
    });

    //replaces comma with dot (here is the problem)
    $(".switch-body").keyup(function(){
        $("#size").val($("#size").val().replace(/,/g, '.'));
        $("#weight").val($("#weight").val().replace(/,/g, '.'));
        $("#height").val($("#height").val().replace(/,/g, '.'));
        $("#width").val($("#width").val().replace(/,/g, '.'));
        $("#length").val($("#length").val().replace(/,/g, '.'));
    });
});

The replace function on other input fields outside this javascript code works just fine.

Answer 1

The problem is because your replace() logic is attempting to work on undefined values, where the fields don't yet exist in the DOM. It only appears to work for #size because it's first in the list. If you check the console after it 'works' you'll see that the replacement in #weight is causing an error.

To fix this, put a common class on all the input elements, then give a function to val() which returns the new value to update the field with based on its current one, like this:

$(".switch-body").keyup(function() {
  $(".no-comma").val(function(i, v) {
    return v.replace(/,/g, '.');
  });
});

$(document).ready(function() {
  $("#switch").change(function() {
    //if selected option is size
    if ($(this).val() == "size") {
      $(".switch-body").html('<input type="text" id="size" placeholder="Product Size" class="no-comma">');
    }
    
    //if selected option is weight
    else if ($(this).val() == "weight") {
      $(".switch-body").html('<input type="text" id="weight" placeholder="Product Weight" class="no-comma">');
    }
    
    //if selected option is weight
    else if ($(this).val() == "dimensions") {
      $(".switch-body").html(`
        <input type="text" id="height" placeholder="Product Height" class="no-comma">
        <input type="text" id="width" placeholder="Product Width" class="no-comma">
        <input type="text" id="length" placeholder="Product Length" class="no-comma">`);
    }
    
    //if selected option is none
    else if ($(this).val() == "") {
      $(".switch-body").html("");
    }
  });

  //replaces comma with dot (here is the problem)
  $(".switch-body").keyup(function() {
    $(".no-comma").val(function(i, v) {
      return v.replace(/,/g, '.');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="type">Type</label>
  <br>
  <select id="switch" class="custom-select" name="switch">
    <option value="">Select...</option>
    <option value="size">Size</option>
    <option value="weight">Weight</option>
    <option value="dimensions">Dimensions</option>
  </select>
</div>
<div class="form-group switch-body">
  <!-- content here -->
</div>