我正尝试使用js将多个函数和按钮连接在一起。(I am trying to connect multiple functions and buttons together using js. and

编程入门行业动态更新时间:2024-10-25 21:18:58

我正尝试使用js将多个函数和按钮连接在一起。(I am trying to connect multiple functions and buttons together using js. and html. and I'm not sure what i'm missing)

当我在浏览器中打开Html文件时，它显示两者已正确连接，但不会输出任何输入框中的内容。我只是需要它根据按下哪个按钮输出函数结果。任何帮助或建议表示赞赏。

function reverseStr(s) {
  var o = [];
  for (var i = 0, len = s.length; i <= len; i++)
    o.push(s.charAt(len - i));
  return o.join('');
}
reverseStr("Hello");

var ch = "a";
    var pattern =/a|e|i|o|u|y/i ;

    isVowelR(ch, pattern);     

    function isVowelR(ch,pattern){
       if(pattern.test(ch)){
       return true;        
    }
      else{return false}
    }

    function countVowles(str1)
{
  var vowel_list = 'aeiouAEIOU';
  var vcount = 0;
  
  for(var x = 0; x < str1.length ; x++)
  {
    if (vowel_list.indexOf(str1[x]) !== -1)
    {
      vcount += 1;
    }
  
  }
  return vcount;
}
console.log(countVowles(""));

var pattern = /[0-9]/;
 function isDigit(regexp){
    if(pattern.test(regexp)){
        return true;
    }
    else{return false}
}



var main = function() {
  document.getElementByld("#inpt").value;
    //this keyword is set to the button that fired the event
    console.log(this.id);
    //dispatch on button id
    if (this.id == "btn1")
        document.querySelector("div").innerHTML = "You clicked Button1";
    else if (this.id == "btn2")
        document.querySelector("div").innerHTML = "You clicked Button2";
    else if (this.id == "btn3")
        document.querySelector("div").innerHTML = "You clicked Button3";
      else
        document.querySelector("div").innerHTML = "You Clicked Button4";

};

//2. register the onclick handlers after the DOM is complete
window.addEventListener("load", function() {

    //select the buttons
    var buttons = document.querySelectorAll("button");

    //register the same handler for each button
    for (var i = 0; i < buttons.length; ++i) {
        buttons[i].addEventListener("click", main);
    }
}); 
  <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Buttons Demo </title>
</head>
<body>
<h2>String Machine</h2>
<p>
Enter a String: 
</p>
<input id= "inpt"> </input>
<button id="btn1">Reverse</button>
<button id="btn2">Vowel or no Vowel</button>
<button id="btn3">Count Vowels</button>
<button id="btn4">Digit or no Digit</button>
<br>
<hr style="width:23%; margin-left:0;">
<div id="outDiv"></div>
<script src="stringMach.js"></script>
</body>
</html> 
  
 
When I open the Html file in the browser, it shows that the two are connected properly but it wont output anything I type into the box.I just need it to output the function result depending on which button was pressed. Any help or advice is appreciated.  
 
 
  
  function reverseStr(s) {
  var o = [];
  for (var i = 0, len = s.length; i <= len; i++)
    o.push(s.charAt(len - i));
  return o.join('');
}
reverseStr("Hello");

var ch = "a";
    var pattern =/a|e|i|o|u|y/i ;

    isVowelR(ch, pattern);     

    function isVowelR(ch,pattern){
       if(pattern.test(ch)){
       return true;        
    }
      else{return false}
    }

    function countVowles(str1)
{
  var vowel_list = 'aeiouAEIOU';
  var vcount = 0;
  
  for(var x = 0; x < str1.length ; x++)
  {
    if (vowel_list.indexOf(str1[x]) !== -1)
    {
      vcount += 1;
    }
  
  }
  return vcount;
}
console.log(countVowles(""));

var pattern = /[0-9]/;
 function isDigit(regexp){
    if(pattern.test(regexp)){
        return true;
    }
    else{return false}
}



var main = function() {
  document.getElementByld("#inpt").value;
    //this keyword is set to the button that fired the event
    console.log(this.id);
    //dispatch on button id
    if (this.id == "btn1")
        document.querySelector("div").innerHTML = "You clicked Button1";
    else if (this.id == "btn2")
        document.querySelector("div").innerHTML = "You clicked Button2";
    else if (this.id == "btn3")
        document.querySelector("div").innerHTML = "You clicked Button3";
      else
        document.querySelector("div").innerHTML = "You Clicked Button4";

};

//2. register the onclick handlers after the DOM is complete
window.addEventListener("load", function() {

    //select the buttons
    var buttons = document.querySelectorAll("button");

    //register the same handler for each button
    for (var i = 0; i < buttons.length; ++i) {
        buttons[i].addEventListener("click", main);
    }
}); 
  <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Buttons Demo </title>
</head>
<body>
<h2>String Machine</h2>
<p>
Enter a String: 
</p>
<input id= "inpt"> </input>
<button id="btn1">Reverse</button>
<button id="btn2">Vowel or no Vowel</button>
<button id="btn3">Count Vowels</button>
<button id="btn4">Digit or no Digit</button>
<br>
<hr style="width:23%; margin-left:0;">
<div id="outDiv"></div>
<script src="stringMach.js"></script>
</body>
</html> 
  
 

                最满意答案
                
                    
                         这工作正常。 希望它会有所帮助  
 
 
  
  function reverseStr(s) {
  var o = [];
  for (var i = 0, len = s.length; i <= len; i++)
    o.push(s.charAt(len - i));
  return o.join('');
}
reverseStr("Hello");

var ch = "a";
var pattern =/a|e|i|o|u|y/i ;

isVowelR(ch, pattern);     

function isVowelR(ch,pattern){
    if(pattern.test(ch)){
       return true;        
    }
    else{ return false }
}

    function countVowles(str1)
{
  var vowel_list = 'aeiouAEIOU';
  var vcount = 0;
  
  for(var x = 0; x < str1.length ; x++)
  {
    if (vowel_list.indexOf(str1[x]) !== -1)
    {
      vcount += 1;
    }
  
  }
  return vcount;
}

var pattern = /[0-9]/;
 function isDigit(regexp){
    if(pattern.test(regexp)){
        return true;
    }
    else{return false}
}



var main = function() {
    //this keyword is set to the button that fired the event
    var str = document.getElementById('inpt').value;
    var pattern =/a|e|i|o|u|y/i ;
    var pattern2 = /[0-9]/;
    
    console.log(this.id);
    //dispatch on button id
    if (this.id == "btn1")
        document.querySelector("div").innerHTML = reverseStr(str);
    else if (this.id == "btn2")
        document.querySelector("div").innerHTML = isVowelR(str, pattern);
    else if (this.id == "btn3")
        document.querySelector("div").innerHTML = countVowles(str);
      else
        document.querySelector("div").innerHTML = "You Clicked Button4";

};

//2. register the onclick handlers after the DOM is complete
window.addEventListener("load", function() {

    //select the buttons
    var buttons = document.querySelectorAll("button");

    //register the same handler for each button
    for (var i = 0; i < buttons.length; ++i) {
        buttons[i].addEventListener("click", main);
    }
}); 
  <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Buttons Demo </title>
</head>
<body>
<h2>String Machine</h2>
<p>
Enter a String: 
</p>
<input id= "inpt"> </input>
<button id="btn1">Reverse</button>
<button id="btn2">Vowel or no Vowel</button>
<button id="btn3">Count Vowels</button>
<button id="btn4">Digit or no Digit</button>
<br>
<hr style="width:23%; margin-left:0;">
<div id="outDiv"></div>
<script src="stringMach.js"></script>
</body>
</html> 
  
 
This is working fine. Hope it'll helps 
 
 
  
  function reverseStr(s) {
  var o = [];
  for (var i = 0, len = s.length; i <= len; i++)
    o.push(s.charAt(len - i));
  return o.join('');
}
reverseStr("Hello");

var ch = "a";
var pattern =/a|e|i|o|u|y/i ;

isVowelR(ch, pattern);     

function isVowelR(ch,pattern){
    if(pattern.test(ch)){
       return true;        
    }
    else{ return false }
}

    function countVowles(str1)
{
  var vowel_list = 'aeiouAEIOU';
  var vcount = 0;
  
  for(var x = 0; x < str1.length ; x++)
  {
    if (vowel_list.indexOf(str1[x]) !== -1)
    {
      vcount += 1;
    }
  
  }
  return vcount;
}

var pattern = /[0-9]/;
 function isDigit(regexp){
    if(pattern.test(regexp)){
        return true;
    }
    else{return false}
}



var main = function() {
    //this keyword is set to the button that fired the event
    var str = document.getElementById('inpt').value;
    var pattern =/a|e|i|o|u|y/i ;
    var pattern2 = /[0-9]/;
    
    console.log(this.id);
    //dispatch on button id
    if (this.id == "btn1")
        document.querySelector("div").innerHTML = reverseStr(str);
    else if (this.id == "btn2")
        document.querySelector("div").innerHTML = isVowelR(str, pattern);
    else if (this.id == "btn3")
        document.querySelector("div").innerHTML = countVowles(str);
      else
        document.querySelector("div").innerHTML = "You Clicked Button4";

};

//2. register the onclick handlers after the DOM is complete
window.addEventListener("load", function() {

    //select the buttons
    var buttons = document.querySelectorAll("button");

    //register the same handler for each button
    for (var i = 0; i < buttons.length; ++i) {
        buttons[i].addEventListener("click", main);
    }
}); 
  <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Buttons Demo </title>
</head>
<body>
<h2>String Machine</h2>
<p>
Enter a String: 
</p>
<input id= "inpt"> </input>
<button id="btn1">Reverse</button>
<button id="btn2">Vowel or no Vowel</button>
<button id="btn3">Count Vowels</button>
<button id="btn4">Digit or no Digit</button>
<br>
<hr style="width:23%; margin-left:0;">
<div id="outDiv"></div>
<script src="stringMach.js"></script>
</body>
</html>