A small help, on my project

Hello Friends and Instructors!

I am trying to use the freecodecamp javascript project in DOM. I am doing this project. I tried well. Everything working, but when the user clicks without any input, it gives the message that fields must not be empty. But, need to refresh the page to work its calculation. I mean, if user puts value again without refresh, it doesnt work. Can any one please give me the hints to solve this?
Thank you very much in advance.
@gangalalchapain

That is because when you do not enter a value for one of the inputs, you replace the innerHTML of resultText (which is a div element with id=“p-1-result”) with the following p element.

<p style='color:red;'> Values should not be blank</p>

When the page first loads, that same div has a span element with an id=“p-1-r”. Since you replace all the html in it. This means you no longer have a span element with id=“p-1-r” if one of the values is blank, so when you finally do enter values and click the Submit button, the following line assigns null to pOneResult. Why? Because there is no element with an id=“p-1-r” anymore. You removed it when one of the fields was blank.

let pOneResult = document.getElementById("p-1-r");

If you were to have checked your browser’s console, it was telling you exactly where the problem was (the line shown above).

@RandellDawson Thank you very much sir. I checked console too many time, but could not get idea. Thank you very much.
you are so kind and helpful.

Thank you again Sir.

I created the new DIV for error message and just a small change on script it works perfectly. Thank you very much sir. Thanks for your inspiration and support sir.

Glad you got it figured out.

I wanted to share a different way of organizing the same project. I created separate functions for the various sub tasks. This makes the functions more reusable. Plus, it should make the code more readable by not being all clumped together in a single function.

JavaScript

function displayError(msg) {
  resultText.innerHTML = msg;
}   
  
function displayResult([firstNumber, lastNumber], sum) {
  resultText.innerHTML = 'The sum of all the number in range of <span id="first-num">' + firstNumber
    + '</span> to <span id="last-num">' + lastNumber + '</span> is : <span id="sump-1-r">' + sum + '</span>';
} 
  
function validateInputs() {
  let errorMsg = "";
  const firstNumber = parseInt(document.getElementById("p-1-num-start").value);
  const lastNumber = parseInt(document.getElementById("p-1-num-end").value);
  if (!firstNumber || !lastNumber) {
    errorMsg = "<p style='color:red;'> Input values should be numbers and not empty</p>";
  } else if (firstNumber > lastNumber) {
    errorMsg = "<p style='color:red;'> The initial number should be less than equal to the last number.</p>";
  }
  return {
    values: [firstNumber, lastNumber],
    errorMsg
  };
}

function sumOfRange([ firstNumber, lastNumber ]) {
  let sum = 0;
  for (let num = firstNumber; num <= lastNumber; num++) {
    sum += num;
  }
  return sum;
}

/*     Main    */
const pOneSubmit = document.getElementById("p-1-submit");
const resultText = document.getElementById("p-1-result");

pOneSubmit.addEventListener("click", function() {
  const { errorMsg, values } = validateInputs();
  if (errorMsg) {
    displayError(errorMsg);
  } else {
    const sum = sumOfRange(values);
    displayResult(values, sum);
  }
  resultText.style.display = "block";
});

I made a slightly tweak to the HTML to use with the code above.

HTML

<main class="main">
  <div class="problem problem-one">
    <div class="question-placeholder">
      <h2> 1. Sum All Numbers in a range </h2>
      <h3> Input any two values, that will give the output of the sum of all the numbers in the range.</h1>
    </div>
    <div class="answer-placeholder">
      <p> Input initial number of the range: &nbsp; &nbsp; <input id="p-1-num-start" type="number" required></p>
      <br>
      <p> Input the last number of the range: <input id="p-1-num-end" type="number" value="" required> </p>
      <div class="button-holder">
        <button type="submit" id="p-1-submit" class="submit submit-p-1"> Submit </button>
      </div>
      <div id="p-1-result"></div>
    </div>
  </div>
</main>

FYI - My solution above also creates a more robust check on the input values. The following line of your solution is not enough to prevent the user from leaving the first input blank and the second input with a value.

if(firstNumber, lastNumber){

Also, there is no point in producing a sum until you know that both inputs are numbers and that the initial number is less than or equal to the last number. That is why my solution checks the inputs first.

@RandellDawson
Thank you sir, This is the first time I got the way exactly what I am looking for. This will give me really a good idea to recognize the way of coding what I am looking for in my study. As, I am new in this, I always afraid to do the project, because I think, my code writing is not a real way in practical world. And, thus I am always looking for the way. You give me the way. You do not only give the better solution of the problem, but more and more, you give me the way of solving the problem. I have no words for your sir. Please always motivate the beginner like me in the same way. God bless you and family.
You are the first kind instructor of coding in online learning.
I will study the every step of your coding and will get the way of coding. I will never afraid of coding the project now.
Thank you from my heart sir.