Question

我无法运行我的javascript。我已经添加了几个不同的选项，并删除它们，我已经有了这个功能，现在把它移到了。无论我尝试什么，按钮都不起作用。我正在尝试学习javascript。它似乎难以学习，但如果我无法测试它，有什么用？请帮忙！

<!DOCTYPE HTML> 
<html>
    <head> 
        <meta charset=utf-8 /> 
        <title>Change Paragraph Text</title> 

    </head>  
    <body> 
        <p id ="text">I’m going to change this text, I hope.</p> 

        <button type="button" onclick="js_style()">Click on Me</button> 

        <script>
            function js_style() {
                'use strict';

                //font styles added by JS:
                document.getElementById("text").style.color="purple";
                document.getElementById("text").style.fontSize="18pt";
                document.getElementById("text").style.fontFamily="Comic Sans              MS";

                }
               document.getElementById("text").innerHTML = js_style();
        </script>

    </body> 
</html>

Answer 1

您提供的代码会在您要更改的文本上抛出未定义的内容。只需删除

document.getElementById("text").innerHTML = js_style();

我认为，一切都应该奏效。这是一个例子：

https://jsfiddle.net/nmLrpvhy/

Answer 2

问题是你有这一行：

document.getElementById("text").innerHTML = js_style();

自动运行（因为它在您的函数之外）并立即更改文本，因此单击按钮确实有效，但它只是设置已设置的相同样式。

此外，innerHTML用于设置元素的“内容”，而不是其样式。在您的情况下，该行尝试将js_style函数的返回值设置为innerHTML的值。但是，该函数不返回值 - 它只关注修改样式。

不要使用内联HTML事件属性（onclick等）。有关原因，请参阅 here 。相反，用JavaScript完成所有工作。

<!DOCTYPE HTML> 
<html>
    <head> 
        <meta charset=utf-8 /> 
        <title>Change Paragraph Text</title> 

    </head>  
    <body> 
        <p id ="text">I’m going to change this text, I hope.</p> 

        <button type="button">Click on Me</button> 

        <script>
            // get a reference to the button
            var btn = document.querySelector("[type='button']");
            
            // set up the click event handler
            btn.addEventListener("click", js_style);
        
            function js_style() {
                //font styles added by JS:
                document.getElementById("text").style.color="purple";
                document.getElementById("text").style.fontSize="18pt";
                document.getElementById("text").style.fontFamily="Comic Sans              MS";
            }

        </script>

    </body> 
</html>

Answer 3

这是您的代码的解决方案：您尝试获取已更改文本的行实际上超出了“js_style”函数的范围，这就是为什么当您按下按钮时没有发生任何事情。

<!DOCTYPE HTML>
<html>

<head>
<meta charset=utf-8 />
<title>Change Paragraph Text</title>

</head>

<body>
<p id="text">I’m going to change this text, I hope.</p>

<button type="button" onclick="js_style()">Click on Me</button>

<script>
    function js_style() {


        //font styles added by JS:
        document.getElementById("text").style.color = "purple";
        document.getElementById("text").style.fontSize = "18pt";
        document.getElementById("text").style.fontFamily = "Comic Sans MS";
        document.getElementById("text").innerHTML = "Changed Text"; /* this 
        line should be here if you want to change the text of #text in you 
        html */
    }
        /* you were written this line here which out of the scope of 
        function */
</script>

</body>

</html>

Answer 4

你可以尝试：

<script type="text/javascript">

而不仅仅是

 <script>

Answer 5

尝试使用onclick="js_style">：

<!DOCTYPE HTML> 
<html>
    <head> 
        <meta charset=utf-8 /> 
        <title>Change Paragraph Text</title> 

    </head>  
    <body> 
        <p id ="text">I’m going to change this text, I hope.</p> 

        <button type="button" onclick="js_style">Click on Me</button> 

        <script>
            function js_style() {
                'use strict';

                //font styles added by JS:
                document.getElementById("text").style.color="purple";
                document.getElementById("text").style.fontSize="18pt";
                document.getElementById("text").style.fontFamily="Comic Sans MS";

                }
               document.getElementById("text").innerHTML = js_style();
        </script>

    </body> 
</html>

javascript样式按钮无法正常工作

5 个答案: