Question

学习JavaScript时遇到问题。

当我单击第二个按钮时，我试图使字体变大，但是它不起作用。

<!DOCTYPE html>
<html>
	<body>
		<h2>What can Javascript do?</h2>
		
		<p id="demo">JavaScript can change HTML content.</p>
		
		<button type = "button" onclick = 'document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Change Text!</button>
		<button type = "button" onclick = 'document.getElementById("demo").style.fontSize='45px''>Bigger Font!</button>
		
	</body>
</html>

问：您能告诉我实现按钮的正确方法吗？

问：如果要在同一按钮中使用2个功能，该怎么办？

非常感谢！

Answer 1

按照原始代码进行操作，因为您使用了单引号来包装属性值，所以您需要在其中使用双引号，就像在第一个函数上使用它的方式一样

<h2>What can Javascript do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Change Text!</button>
<button type="button" onclick='document.getElementById("demo").style.fontSize="45px"'>Bigger Font!</button>

但是通常，属性值用双引号引起来。我认为第二个问题的答案就是创建一个调用这两个函数的函数

还有一件事情，如果先创建一个函数然后调用它，那会更好。

Answer 2

最好创建一个函数，然后通过按钮上的事件（单击）调用该函数。

<script>
function dostuff(){
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    document.getElementById("demo").style.fontSize='45px';
}
</script>

<button type = "button" onclick='dostuff'>Change Text + Bigger Font!</button>

Answer 3

引号是问题所在。单引号使编译器在第一个右引号出现时将其编译为document.getElementById("demo").style.fontSize=。

<!DOCTYPE html>
<html>
	<body>
		<h2>What can Javascript do?</h2>
		
		<p id="demo">JavaScript can change HTML content.</p>
		
		<button type = "button" onclick = 'document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Change Text!</button>
		<button type = "button" onclick = 'document.getElementById("demo").style.fontSize="45px"'>Bigger Font!</button>
		
	</body>
</html>

Answer 4

如果您想两者都做，则可以在;的{{1}}之后插入命令！

onclick = '...'

在HTML上使用JavaScript增加字体大小

4 个答案: