Question

所以我正在尝试制作一个随机生成仓鼠名称的按钮，用于我正在服用的课程。

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

点击它时，我的按钮当前没有响应。我需要它来弹出一个仓鼠的名字，但是当我现在点击它时，没有任何反应。

Answer 1

您有两个错误：

1）javascript声明不正确

<script type = "JavaScript">

应该是：

<script type="text/javascript">

2）你需要在函数调用中添加括号（没有括号只是对函数的引用）：

<button onClick="processRequest()">

这应该有效。

Answer 2

尝试在函数末尾添加Int以查看函数是否被触发。
如果是，则表示您的函数包含错误。我认为应该这样写：
```
alert(result)
```
名字数组在哪里？在lab4.js？如果是这样，您应该从这里获取名称，而不是将function processRequest(){ var target = document.getElementById("nameField"); var result = target.innerHTML; result = parseInt(result) target.innerHTML = result +1; //<---- HERE, add innerHTML }放在目标中。

Answer 3

老实说，我会在按钮上添加一个ID并使用Javascript来创建事件监听器。下面我已经将“buttonClick”的ID添加到按钮并添加了事件侦听器（识别单击）以运行所需的功能。注意我添加的警报，只是为了检查事件和函数是否被调用：

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>

注意我在名称为'nameField'的<p>中添加了名称'Fred（TEST NAME）。这只是为了测试它是否正常工作：）

如何在函数上进行按钮调用

3 个答案: