文章/答案/技术大牛

发布

社区首页 >问答首页 >JavaScript函数是在单击按钮时以未定义的形式显示函数名。

问JavaScript函数是在单击按钮时以未定义的形式显示函数名。
EN

Stack Overflow用户

提问于 2018-01-12 11:26:07

回答 3查看 559关注 0票数 0

我正在测试如何使用Javascript更改文本和CSS元素。

我的HTML中有三个按钮，到目前为止我只使用了一个按钮(更改标题)。单击按钮时，我想更改H1文本。

使用我当前的编码，当我单击按钮时，什么都不会发生，并且我在工具控制台中显示了以下内容：

*参考错误: changeTitle未定义了解更多Index.html:1:1

Onclick file:///D:/Google%20Drive/Programming/EDX/Introduction%20to%20JavaScript/Module_1/index.html:1:1*

问题：

如果我认为我已经在外部JS文件中定义了changeTitle函数，那么请有人帮助我理解为什么浏览器说它没有定义。
我能使用onclick方法吗？在标记元素中，使我不必使用按钮？

请在下面找到片段：

$(document).ready(function() {
  function changeTitle() {
    var title = document.querySelector(".head-title");
    title.innerHTML += "<br>(or how to speak like a pirate)";
  };
});

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'arial', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 50px;
}

header > h1 {
  background-color: #FEF1E0;
  color: #A47F1A;
  text-align: center;
  line-height: 100px;
  border: dashed 5px #A47F1A;
  border-radius: 40px;
  text-shadow: 2px 2px #3B2E2A
}

 .nav {
  list-style-type: none;
  background-color: #3B2E2A;
  margin: 20px auto;
  text-align: center;
  /*padding: 20px 0 20px 0;*/
}

 .nav li {
  display: inline-block;
  /*padding: 0 25px;*/
}

 .nav li a {
  color: #FEF1E0;
  text-decoration: none;
  display: block;
  padding: 20px 25px;
}

.nav li a:hover {
  background-color: #FEF1E0;
  color: #3B2E2A;
  text-decoration: none;
}

.content > p {
  padding: 20px 50px 0px 50px;
  text-align: justify;
}

<!DOCTYPE html>
<html>
   <head>
      <title>Test JS Usage</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/custom.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="./js/custom.js"></script>
   </head>
   <body>
      <header>
         <h1 class="head-title">
            Pirate Verbal Diahorrea
         </h1>
         <nav>
            <button onclick="changeTitle();">Change Title</button>
            <button onclick="changeTitle();">Change Para1 colour</button>
            <button onclick="changeTitle();">Change Header Colour</button>
         </nav>
         <ul class="nav">
            <li><a href="#">Change Title</a></li>
            <li><a href="#">Change Para1 colour</a></li>
            <li><a href="#">Change Header Colour</a></li>
         </ul>
      </header>
      <div class="content">
         <p class="para1">
            Ahoy league cutlass Sail ho grapple brig cable Chain Shot topgallant rutters grog keel run a shot across the bow squiffy execution dock chandler ballast heave to come about weigh anchor. Bowsprit Yellow Jack lugsail warp gally piracy strike colors flogging come about avast fluke Sea Legs parrel black spot hempen halter run a shot across the bow American Main crow's nest red ensign cable. Gally jolly boat long clothes quarterdeck fluke league bilge water dance the hempen jig interloper jib scourge of the seven seas swab haul wind Chain Shot draught rope's end belay reef Yellow Jack Buccaneer. Nelsons folly topsail Cat o'nine tails hail-shot scuttle scourge of the seven seas loaded to the gunwalls carouser Sail ho fluke bowsprit lateen sail gabion yard provost hands mutiny cog belay blow the man down. Draught hornswaggle barkadeer jib interloper fore marooned sloop lad scurvy hardtack nipperkin grapple piracy take a caulk capstan lateen sail yard scuppers coxswain. 
         </p>
         <p class="para2">
            Handsomely clap of thunder flogging pillage Jack Tar wherry pirate plunder keel quarter red ensign hands draught league Shiver me timbers smartly swab fathom haul wind hail-shot. Bilge rat landlubber or just lubber crack Jennys tea cup rum wherry Buccaneer heave to spike bilge water avast red ensign piracy tack mutiny chase guns shrouds cackle fruit booty main sheet quarter. Barque six pounders scuttle shrouds bilged on her anchor tender rigging Admiral of the Black gabion spike Arr belay sloop me rope's end lee black spot weigh anchor yo-ho-ho holystone. Holystone overhaul walk the plank schooner to go on account swab yard parley boom plunder lateen sail ho draught tack deadlights gunwalls parrel smartly maroon dance the hempen jig. Dance the hempen jig Chain Shot Cat o'nine tails skysail code of conduct case shot Letter of Marque stern run a shot across the bow jolly boat booty jack six pounders pink barkadeer Nelsons folly mutiny Sink me belay heave to. 
         </p>
      </div>
   </body>
</html>

javascript

jquery

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-01-12 11:39:01

$(document).ready()的目的

$(document).ready(function() { /* handling code for the event document.ready */ })

首先，您需要理解这个document.ready处理程序的用途。当页面加载时，page脚本无法确定DOM的哪些部分已经可用。document.ready在DOM完成时触发，因此您可以开始使用jQuery、document.getElementById或document.querySelector来选择元素。

在全球范围内提供产品

如果您想要定义全局可用的函数，则不需要在另一个函数中这样做，但如果坚持，则需要显式地将该函数附加到全局对象(在浏览器中，该对象是window对象)：

$(document).ready(function() {
  window.changeTitle = function changeTitle() {
    var title = document.querySelector(".head-title");
    title.innerHTML += "<br>(or how to speak like a pirate)";
  };
});

更好的方法是定义处理程序外部的函数：

function changeTitle() {
  var title = document.querySelector(".head-title");
  title.innerHTML += "<br>(or how to speak like a pirate)";
};

它隐式地将其附加到全局对象，并通过使用changeTitle()调用它，从而使它可以从任何地方访问。

添加处理按钮单击的函数--正确的方法

为了让您了解如何将事件处理程序附加到元素，下面是document.ready处理程序：

$(document).ready(function() {
  document.querySelectorAll('nav button').forEach(function(button) {
    button.addEventListener('click', changeTitle);
  })
});

如果您已经在使用jQuery，则可以将其简化为

$(document).ready(function() {
  $('nav button').on('click', changeTitle);
});

链接使代码更短。

var title = document.querySelector(".head-title");
title.innerHTML += "<br>(or how to speak like a pirate)";

可以缩短为

document.querySelector(".head-title").innerHTML += "<br>(or how to speak like a pirate)";

票数 1

Stack Overflow用户

发布于 2018-01-12 11:34:12

如果我认为我已经在外部JS文件中定义了changeTitle函数，那么请有人帮助我理解为什么浏览器说它没有定义。

要使从内联单击的方法调用正常工作，需要全局定义该方法。changeTitle 方法是 document.ready事件处理程序的本地方法。

如果要在changeTitle中定义document.ready函数，可以使用jquery的click

$(document).ready(function() {

  function changeTitle() {
    var title = document.querySelector(".head-title");
    title.innerHTML += "<br>(or how to speak like a pirate)";
  };

  $( "button" ).click( changeTitle );

});

Demo

$(document).ready(function() {

  function changeTitle() {
    var title = document.querySelector(".head-title");
    title.innerHTML += "<br>(or how to speak like a pirate)";
  };
  
  $( "button" ).click( changeTitle );

});

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'arial', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 50px;
}

header > h1 {
  background-color: #FEF1E0;
  color: #A47F1A;
  text-align: center;
  line-height: 100px;
  border: dashed 5px #A47F1A;
  border-radius: 40px;
  text-shadow: 2px 2px #3B2E2A
}

 .nav {
  list-style-type: none;
  background-color: #3B2E2A;
  margin: 20px auto;
  text-align: center;
  /*padding: 20px 0 20px 0;*/
}

 .nav li {
  display: inline-block;
  /*padding: 0 25px;*/
}

 .nav li a {
  color: #FEF1E0;
  text-decoration: none;
  display: block;
  padding: 20px 25px;
}

.nav li a:hover {
  background-color: #FEF1E0;
  color: #3B2E2A;
  text-decoration: none;
}

.content > p {
  padding: 20px 50px 0px 50px;
  text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
	<title>Test JS Usage</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
	<header>
		<h1 class="head-title">
			Pirate Verbal Diahorrea
		</h1>
		<nav>
			<button>Change Title</button>
			<button>Change Para1 colour</button>
			<button>Change Header Colour</button>
		</nav>
		<ul class="nav">
			<li><a href="#">Change Title</a></li>
			<li><a href="#">Change Para1 colour</a></li>
			<li><a href="#">Change Header Colour</a></li>
		</ul>
		
	</header>
	<div class="content">
		<p class="para1">
			Ahoy league cutlass Sail ho grapple brig cable Chain Shot topgallant rutters grog keel run a shot across the bow squiffy execution dock chandler ballast heave to come about weigh anchor. Bowsprit Yellow Jack lugsail warp gally piracy strike colors flogging come about avast fluke Sea Legs parrel black spot hempen halter run a shot across the bow American Main crow's nest red ensign cable. Gally jolly boat long clothes quarterdeck fluke league bilge water dance the hempen jig interloper jib scourge of the seven seas swab haul wind Chain Shot draught rope's end belay reef Yellow Jack Buccaneer. Nelsons folly topsail Cat o'nine tails hail-shot scuttle scourge of the seven seas loaded to the gunwalls carouser Sail ho fluke bowsprit lateen sail gabion yard provost hands mutiny cog belay blow the man down. Draught hornswaggle barkadeer jib interloper fore marooned sloop lad scurvy hardtack nipperkin grapple piracy take a caulk capstan lateen sail yard scuppers coxswain. 
		</p>
		<p class="para2">
			Handsomely clap of thunder flogging pillage Jack Tar wherry pirate plunder keel quarter red ensign hands draught league Shiver me timbers smartly swab fathom haul wind hail-shot. Bilge rat landlubber or just lubber crack Jennys tea cup rum wherry Buccaneer heave to spike bilge water avast red ensign piracy tack mutiny chase guns shrouds cackle fruit booty main sheet quarter. Barque six pounders scuttle shrouds bilged on her anchor tender rigging Admiral of the Black gabion spike Arr belay sloop me rope's end lee black spot weigh anchor yo-ho-ho holystone. Holystone overhaul walk the plank schooner to go on account swab yard parley boom plunder lateen sail ho draught tack deadlights gunwalls parrel smartly maroon dance the hempen jig. Dance the hempen jig Chain Shot Cat o'nine tails skysail code of conduct case shot Letter of Marque stern run a shot across the bow jolly boat booty jack six pounders pink barkadeer Nelsons folly mutiny Sink me belay heave to. 
		</p>
	</div>
</body>
</html>

票数 1

Stack Overflow用户

发布于 2018-01-12 11:34:18

  function changeTitle() {
    var title = document.querySelector(".head-title");
    title.innerHTML += "<br>(or how to speak like a pirate)";
  };

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'arial', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 50px;
}

header > h1 {
  background-color: #FEF1E0;
  color: #A47F1A;
  text-align: center;
  line-height: 100px;
  border: dashed 5px #A47F1A;
  border-radius: 40px;
  text-shadow: 2px 2px #3B2E2A
}

 .nav {
  list-style-type: none;
  background-color: #3B2E2A;
  margin: 20px auto;
  text-align: center;
  /*padding: 20px 0 20px 0;*/
}

 .nav li {
  display: inline-block;
  /*padding: 0 25px;*/
}

 .nav li a {
  color: #FEF1E0;
  text-decoration: none;
  display: block;
  padding: 20px 25px;
}

.nav li a:hover {
  background-color: #FEF1E0;
  color: #3B2E2A;
  text-decoration: none;
}

.content > p {
  padding: 20px 50px 0px 50px;
  text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
	<title>Test JS Usage</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
	<header>
		<h1 class="head-title">
			Pirate Verbal Diahorrea
		</h1>
		<nav>
			<button onclick="changeTitle();">Change Title</button>
			<button onclick="changeTitle();">Change Para1 colour</button>
			<button onclick="changeTitle();">Change Header Colour</button>
		</nav>
		<ul class="nav">
			<li><a href="#">Change Title</a></li>
			<li><a href="#">Change Para1 colour</a></li>
			<li><a href="#">Change Header Colour</a></li>
		</ul>
		
	</header>
	<div class="content">
		<p class="para1">
			Ahoy league cutlass Sail ho grapple brig cable Chain Shot topgallant rutters grog keel run a shot across the bow squiffy execution dock chandler ballast heave to come about weigh anchor. Bowsprit Yellow Jack lugsail warp gally piracy strike colors flogging come about avast fluke Sea Legs parrel black spot hempen halter run a shot across the bow American Main crow's nest red ensign cable. Gally jolly boat long clothes quarterdeck fluke league bilge water dance the hempen jig interloper jib scourge of the seven seas swab haul wind Chain Shot draught rope's end belay reef Yellow Jack Buccaneer. Nelsons folly topsail Cat o'nine tails hail-shot scuttle scourge of the seven seas loaded to the gunwalls carouser Sail ho fluke bowsprit lateen sail gabion yard provost hands mutiny cog belay blow the man down. Draught hornswaggle barkadeer jib interloper fore marooned sloop lad scurvy hardtack nipperkin grapple piracy take a caulk capstan lateen sail yard scuppers coxswain. 
		</p>
		<p class="para2">
			Handsomely clap of thunder flogging pillage Jack Tar wherry pirate plunder keel quarter red ensign hands draught league Shiver me timbers smartly swab fathom haul wind hail-shot. Bilge rat landlubber or just lubber crack Jennys tea cup rum wherry Buccaneer heave to spike bilge water avast red ensign piracy tack mutiny chase guns shrouds cackle fruit booty main sheet quarter. Barque six pounders scuttle shrouds bilged on her anchor tender rigging Admiral of the Black gabion spike Arr belay sloop me rope's end lee black spot weigh anchor yo-ho-ho holystone. Holystone overhaul walk the plank schooner to go on account swab yard parley boom plunder lateen sail ho draught tack deadlights gunwalls parrel smartly maroon dance the hempen jig. Dance the hempen jig Chain Shot Cat o'nine tails skysail code of conduct case shot Letter of Marque stern run a shot across the bow jolly boat booty jack six pounders pink barkadeer Nelsons folly mutiny Sink me belay heave to. 
		</p>
	</div>
</body>
</html>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48225324

复制

相似问题

问JavaScript函数是在单击按钮时以未定义的形式显示函数名。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript函数是在单击按钮时以未定义的形式显示函数名。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript函数是在单击按钮时以未定义的形式显示函数名。
EN