IF statement with increment, and display value

Question

I am trying to increment the value from id="wordcount" and add the value with existing value in id="running-summary-total . As you increase the value in id="wordcountl" also increment the value id="running-summary-total" and add and display the value in id="running-summary-total"

<div>
    <strong class="fa fa-dollar-sign">$</strong>
    <input type="text" readonly="readonly" name="" id="running-summary-total" value="0.00">
</div>

<input class="form-control input-number" type="number" name="wordcount" value="" min="1" max="100000000000" id="wordcount">

Script

 var z = document.getElementById("wordcount").value;
    console.log(z)
    if (++z) {
     var d = 30;
     var wc = d + 4;
   document.getElementById("running-summary-total").value =  +wc;
}

I don't know where I made a mistake, because the script is not working

Answer 1

Since you're trying to edit a readonly input, you first need to remove the readonly attribute before you can make any changes.

The question itself is quite unclear, what's d for instance?

This is the gist of how you would change it. Comment below with clarifications please and I can update it for you.

function changeReadonlyInput(inpt) {
  console.log("new Value " + inpt.value);
  var total = document.getElementById("running-summary-total");
  total.readonly = false;
  var d = 30;
  var wc = d + 4;
  total.value = inpt.value + wc;
  total.readonly = true;
}

Then attach that function to the eventlistener oninput on your <input> as shown below.

Demo

 function changeReadonlyInput(inpt) { console.log("new Value " + inpt.value); var total = document.getElementById("running-summary-total"); total.readonly = false; var d = 30; var wc = d + 4; total.value = inpt.value + wc; total.readonly = true; }

 <div> <strong class="fa fa-dollar-sign">$</strong> <input type="text" readonly="readonly" name="" id="running-summary-total" value="0.00"> </div> <input class="form-control input-number" type="number" name="wordcount" value="" min="1" max="100000000000" id="wordcount" oninput="changeReadonlyInput(this)">