Why javascript value property doesn't work like manually change?

Question

I have some problem with triggering action. I have range slider and input type number.

Input number is hidden and my range input is changing value of input number like this:

function updateTextInput_water(val) {
  var input = document.getElementById('nf-field-32');
  document.getElementById('nf-field-32').value = val;
  input.value;
  input.setAttribute('value', input.value);
}

<input type="range" value="20" name="rangeInput" min="1" max="101" onchange="updateTextInput_water(this.value);">
<input type="number" id="nf-field-32" name="nf-field-32 value=" 20 " min="1 " max="101 " step="1 ">

I have some action when input number is set to specific number. It works when i manually change number with keydown and keyup, also it works when i type from the keyboard this specific number, but it doesnt work when i use slider to change value of my input number.

Why?

Trigger action (show/hide):

/**
 * Handle showing/hiding fields
 * 
 * @package Ninja Forms Conditional Logic
 * @copyright (c) 2016 WP Ninjas
 * @since 3.0
 */
define( [], function() {
    var controller = Marionette.Object.extend( {
        initialize: function() {
            nfRadio.channel( 'condition:trigger' ).reply( 'hide_field', this.hideField, this );
            nfRadio.channel( 'condition:trigger' ).reply( 'show_field', this.showField, this );
        },

        hideField: function( conditionModel, then ) {
            var targetFieldModel = nfRadio.channel( 'form-' + conditionModel.collection.formModel.get( 'id' ) ).request( 'get:fieldByKey', then.key );

            if( 'undefined' == typeof targetFieldModel ) return;
            targetFieldModel.set( 'visible', false );
            if ( ! targetFieldModel.get( 'clean' ) ) {
                targetFieldModel.trigger( 'change:value', targetFieldModel );
            }
            
            nfRadio.channel( 'fields' ).request( 'remove:error', targetFieldModel.get( 'id' ), 'required-error' );
        },

        showField: function( conditionModel, then ) {
            var targetFieldModel = nfRadio.channel( 'form-' + conditionModel.collection.formModel.get( 'id' ) ).request( 'get:fieldByKey', then.key );
            //TODO: Add an error to let the user know the show/hide field is empty.
            if( 'undefined' == typeof targetFieldModel ) return;
            targetFieldModel.set( 'visible', true );
            if ( ! targetFieldModel.get( 'clean' ) ) {
                targetFieldModel.trigger( 'change:value', targetFieldModel );
            }
            var viewEl = { el: nfRadio.channel( 'form-' + conditionModel.collection.formModel.get( 'id' ) ).request( 'get:el' ) };
            nfRadio.channel( 'form' ).request( 'init:help', viewEl );
        }
    });

    return controller;
} );

This is part when i compare and chose greater then 100 number and then i show or hide text input in my form: Github ninja form

Answer 1

If you want to show/hide fields or even html blocks you can do that with conditional logic plugin from ninja forms. In my opinion is much more efficient setting rules/conditions in the plugin UI instead of getting stuck with custom code.