How to connect and display input value to the DOM while making a calculation?

Question

I'm creating a little script to learn.

I want the user to enter a word and the letter he want's to see how many there are in the word.

I connected it to the DOM, but I'm not sure how the input that the user entered can be connected to the script to calculate it, and then outputted in the DOM.

Something works, and something not.

Here is the codepen: https://codepen.io/Aurelian/pen/KxPKWE?editors=1010

Here is the HTML:

<form id="form" class="container">

   <div class="">
      <label>Enter a phase:</label>
      <input  id="userString" name="userString"  placeholder="Coconut" />
   </div>

   <div class="">
      <label name="userString">Letter you want to search</label>
      <input id="userLetter" name="userLetter" placeholder="c" />
   </div>

   <div id="errorMsg"></div>

   <p class="result">
         There are 
         <span id="displayNumber"></span> letter
         <span id="displayLetter"></span> in the word 
         <span id="displayString"></span>
   </p>

   <button type="submit" name="submit" value="submit">Submit</button>
</form>

Here is the JS:

var form = document.querySelector('#form');

const letterCountDisplay = function(letter) {
   const displayNumber = document.querySelector("#displayNumber");
   displayNumber.textContent = letter;
}

// const inputValidation = function() {
//       if ((userString || userLetter) === " ") {

//       const errorElement = document.createElement("p");
//       errorElement.textContent = "Please fill both of the inputs";
//       errorMsg.appendChild(errorElement);
//    }
// }

const createElement = function(userStringInput, userLetterInput) {
   // inputValidation();

   this.userStringInput = userStringInput;
   this.userLetterInput = userLetterInput;

   const userString = document.querySelector("#userString").value;
   const displayString = document.querySelector("#displayString");
   displayString.textContent = userStringInput;

   const userLetter = document.querySelector("#userLetter").value;
   const displayLetter = document.querySelector("#displayLetter");
   displayLetter.textContent = userLetterInput;

   const errorMsg = document.querySelector("#errorMsg");

}

form.addEventListener("submit", function(e) {
   e.preventDefault();
   countChar(createElement(x, y));
});

const countChar = function(string, letter) {
  let letterCount = 0;
  for (let i = 0; i < string.length; i++) {
      if(string.charAt(i) === letter) {
        letterCount ++  
      } 
    }
    return letterCountDisplay(letterCount);

}

countChar(createElement(userStringInput, userLetterInput));

Answer 1

Maybe you need to have a look at jQuery.

This code is probably a working answer matching to your question:

$("button").click(function(e) {
  let value = $("#userString").val()
  let letter = $("#userLetter").val()

  let count = ((value.match(new RegExp(letter, "g")) || []).length);
  $("#displayNumber").text(count)
  $("#displayLetter").text(letter)
  $("#displayString").text("'" + value + "'")

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <label>Enter a phase:</label>
  <input id="userString" name="userString" placeholder="Coconut" />
</p>

<p>
  <label name="userString">Letter you want to search</label>
  <input id="userLetter" name="userLetter" placeholder="c" />
</p>

<p>
  There are
  <span id="displayNumber"></span> letter
  <span id="displayLetter"></span> in the word
  <span id="displayString"></span>
</p>

<button>Submit</button>

Edit: This is the vanilla solution using pure js

function submit() {
  let value = document.getElementById("userString").value
  let letter = document.getElementById("userLetter").value

  let count = ((value.match(new RegExp(letter, "g")) || []).length);
  document.getElementById("displayNumber").innerHTML = (count)
  document.getElementById("displayLetter").innerHTML = (letter)
  document.getElementById("displayString").innerHTML = ("'" + value + "'")
}

<p>
  <label>Enter a phase:</label>
  <input id="userString" name="userString" placeholder="Coconut" />
</p>

<p>
  <label name="userString">Letter you want to search</label>
  <input id="userLetter" name="userLetter" placeholder="c" />
</p>

<p>
  There are
  <span id="displayNumber"></span> letter
  <span id="displayLetter"></span> in the word
  <span id="displayString"></span>
</p>

<button onclick="submit()">Submit</button>