如何对函数进行按钮调用

How to make a button call on a function

本文关键字：按钮 调用 函数      更新时间：2023-09-26

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

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

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

您有两个错误：

1） javascript 声明不正确

<script type = "JavaScript">

应该是：

<script type="text/javascript">

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

<button onClick="processRequest()">

这应该行得通。

  1. 尝试在函数末尾添加alert(result)以查看函数是否被触发。

  2. 如果是这样，则意味着您的函数包含错误。我认为应该这样写： 

    function processRequest(){
    var target = document.getElementById("nameField");
    var result = target.innerHTML;
    result = parseInt(result)
    target.innerHTML = result +1; //<---- HERE, add innerHTML
}

  3. 名称数组在哪里？在实验室4.js？如果是这样，您应该从这里获取名称，而不是将result + 1放在目标中。

老实说，我会在按钮上添加一个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>

请注意，我在<p>中添加了名称"Fred（测试名称）"，ID 为"nameField"。这只是为了测试它是否正常工作:)

相关文章：