我正尝试使用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>
更多推荐
发布评论