如何在函数上进行按钮调用
[英]How to make a button call on a function
问题描述
So I am trying to make a button that randomly generates hamster names for a class I'm taking. 
因此，我尝试制作一个按钮，为正在上课的班级随机生成仓鼠名称。
<html>
<head>
<meta charset="UTF-8">
<title>CS 105: Name That Hamster</title>
<!-- JavaScript for Lab 4 -->
<script type="text/javascript" src="lab4.js"></script>
<script language = "JavaScript">
function processRequest(){
var target = document.getElementById("nameField");
var result = target.innerHTML;
result = parseInt(result)
target.HTML = result +1;}
</script>
<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Additional CS 105 Stylesheet Rules -->
<link rel="stylesheet" type="text/css" href="https://cs105.cs.illinois.edu/res/cs105.css">
</head>
<body>
<div class="cs105-mp-header" id="content">
<div class="container">
<h1>Lab 4: Name That Hamster</h1>
<p>When complete, this tool will randomly name your (or anybody else's) hamster using on of the 1000 most popular baby names for each gender (Social Security Data for children born in 1997)</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>Please select your hamster's gender!</h3>
<p>
<input type="radio" name="gender" id="genderF" value="M">It's a Girl!<br>
<input type="radio" name="gender" id="genderM" value="F">It's a Boy!<br>
<button onClick="processRequest"> Name That Hamster!</button>
<p id="nameField"></p>
</div>
</div>
</body>
My button is currently unresponsive when I click on it. 当我单击按钮时，该按钮当前无响应。 I need it to pop up a name of a hamster, but when I click on it now, nothing happens. 我需要它来弹出仓鼠的名字，但是当我单击它时，什么也没有发生。
3 个解决方案
解决方案1
1 2016-02-24 16:04:53
You have two errors: 您有两个错误：
1) The javascript declaration is incorrect 1）JavaScript声明不正确
<script type = "JavaScript">
should be: 应该：
<script type="text/javascript">
2) You need to add brackets in your function call (without brackets is just a reference to a function): 2）您需要在函数调用中添加方括号（不包含方括号只是对函数的引用）：
<button onClick="processRequest()">
That should work. 那应该工作。
解决方案2
0 2016-02-24 15:43:24
Try adding
alert(result)at the end of your function to see if the function gets triggered.尝试在函数末尾添加alert(result)，以查看函数是否被触发。If it does, then it means your function contains error.
如果是这样，则意味着您的函数包含错误。 I think it should be written like this : 我认为应该这样写： function processRequest(){ var target = document.getElementById("nameField"); var result = target.innerHTML; result = parseInt(result) target.innerHTML = result +1; //<---- HERE, add innerHTML }Where is the array of names?
名称数组在哪里？ In lab4.js? 在lab4.js中？ If so you should get the names from here, and not put the result + 1inside your target.如果是这样，则应从此处获取名称，而不要将result + 1放入目标中。
解决方案3
0 2016-02-24 15:51:52
To be honest, I would add an ID to the button and use Javascript to create event listener. 老实说，我将向该按钮添加一个ID，然后使用Javascript创建事件监听器。 Below I've added the ID of 'buttonClick' to the button and added event listeners (recognize the click) to run the function you want. 在下面，我向按钮添加了“ buttonClick”的ID，并添加了事件侦听器（识别单击）来运行所需的功能。 Notice the alerts I have added too, just to check whether the event and function gets called : 注意我也添加了警报，只是为了检查事件和函数是否被调用：
document.getElementById('buttonClick').addEventListener('click',function(){ alert('click') return processRequest(); });
<html> <head> <meta charset="UTF-8"> <title>CS 105: Name That Hamster</title> <!-- JavaScript for Lab 4 --> <script type="text/javascript" src="lab4.js"></script> <script language = "JavaScript"> function processRequest(){ var target = document.getElementById("nameField"); var result = target.innerHTML; alert('Result : ' + result ) result = parseInt(result) target.HTML = result +1;} </script> <!-- Bootstrap Stylesheet --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Additional CS 105 Stylesheet Rules --> <link rel="stylesheet" type="text/css" href="https://cs105.cs.illinois.edu/res/cs105.css"> </head> <body> <div class="cs105-mp-header" id="content"> <div class="container"> <h1>Lab 4: Name That Hamster</h1> <p>When complete, this tool will randomly name your (or anybody else's) hamster using on of the 1000 most popular baby names for each gender (Social Security Data for children born in 1997)</p> </div> </div> <div class="container"> <div class="row"> <h3>Please select your hamster's gender!</h3> <p> <input type="radio" name="gender" id="genderF" value="M">It's a Girl!<br> <input type="radio" name="gender" id="genderM" value="F">It's a Boy!<br> <button id='buttonClick' onclick="processRequest"> Name That Hamster!</button> <p id="nameField" style='display:none'>Fred (TEST NAME)</p> </div> </div> </body>
Notice I have added the name 'Fred (TEST NAME) in the <p> with ID 'nameField'. 注意，我在<p>添加了名为“ Fred（TEST NAME）”的名称，ID为“ nameField”。 This is just to test if it's working :) 这只是为了测试它是否有效:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.