javascript - 如何在计算时连接并显示 DOM 的输入值？

Question

我正在创建一个小脚本来学习。

我希望用户输入一个单词和他想要的字母，看看这个单词中有多少个。

我把它连接到了 DOM，但是我不知道如何将用户输入的输入连接到脚本来计算它，然后输出到 DOM 中。

有些有效，有些无效。

这是代码笔:https://codepen.io/Aurelian/pen/KxPKWE?editors=1010

这是 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>

这是 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

也许您需要看看 jQuery。

此代码可能是与您的问题匹配的有效答案:

$("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>

编辑:这是使用纯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>