Javascript 如何在进行计算时连接并显示DOM的输入值？

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

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

我将它连接到DOM，但我不确定用户输入的输入如何连接到脚本以计算它，然后在DOM中输出

有些东西行得通，有些东西不行

这是代码笔：

以下是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));

var form=document.querySelector（'#form'）；
常量letterCountDisplay=函数（字母）{
const displayNumber=document.querySelector（“#displayNumber”）；
displayNumber.textContent=字母；
}
//常量inputValidation=函数（）{
//if（（userString | | userLetter）==“”）{
//const errorElement=document.createElement（“p”）；
//errorElement.textContent=“请填写两个输入”；
//errorMsg.appendChild（errorElement）；
//    }
// }
const createElement=函数（userStringInput、userLetterInput）{
//输入验证（）；
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”）；
}
表格.附录列表（“提交”，功能（e）{
e、 预防默认值（）；
countChar（createElement（x，y））；
});
const countChar=函数（字符串、字母）{
让letterCount=0；
for（设i=0；i

也许您需要看看jQuery

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

$（“按钮”）。单击（功能（e）{
let value=$（“#userString”）.val（）
let letter=$（“#userLetter”）.val（）
让count=（（value.match（新的RegExp（字母，“g”））| |[]）.length）；
$（“#显示编号”）.text（计数）
$（“#显示字母”）。文本（字母）
$（“#显示字符串”）.text（““+value+”））
})

进入一个阶段：


你要查的信


有
信
总之

提交

我正在使用香草JavaScript完成这项工作，学习编程和JavaScript。默认情况下我已经知道jQuery了。我很欣赏这个解决方案，但我正在学习JS，如果能改进/使用我的代码，我会很高兴，因为我可以参考它，而这是一个完全不同的解决方案，它可以工作，但是接下来是关于学习我所使用的概念。你介意接受一个答案来解决这个问题吗？我不介意，但这不是我所看到的，正如上面的评论所提到的。您的解决方案使用了与我不同的概念。如果解决方案能够与我编写的代码相结合，而不是与我不知道的概念相结合，那就太好了。出于这个原因，答案并不能真正解决同一个概念的问题，这正是我所追求的，所以我将让问题公开，这样有人可以用相同的概念来编写解决方案，因为这不是我想要的。尽管对解决方案表示赞赏，但显示了不同的方法。