javascript - 用 3 个按钮制作一个程序。文本输入将输出前的大小写改成p。如何进行?

标签 javascript html css

这是我正在从事的元素,提供的阅读 Material 在帮助我方面没有意义。我必须为每个按钮定义一个函数,以及一个将段落元素的内容更改为最终文本的附加函数。这是我的 HTML 和 Javascript 代码。我不太了解的是函数的返回值需要如何与最终函数通信,最终函数将更改的文本输出到段落元素。当我运行该程序时,系统会提示我输入,但在那之后什么也没有发生。请帮助我理解我遗漏的概念。

<!DOCTYPE html>
    <html>
        <head>
            <title>String Methods</title>
            <link rel="stylesheet" href="brimberry_pr9.css">
        </head>

        <body>
            <div>
                <script type="text/javascript" src="brimberry_pr9.js"></script>
                <button id="uppercase" onclick="uppercase()";>UPPERCASE</button>
                <br>
                <button id="lowercase" onclick="lowercase()";>lowercase</button>
                <br>
                <button id="capitalFirst" onclick="capitalFirst()";>Capital First</button>
            </div>
            <p id="output">Your Changed Text Will Appear Here</p>

        </body>
    </html>

    function uppercase() {
    	getInput = prompt("Enter some text below.");
    	upperChange = getInput.toUpperCase();
    	return upperChange;
    }
    function lowercase() {
    	getInput = prompt("Enter some text below.");
    	lowerChange = getInput.toLowerCase();
    	return lowerChange;
    }
    function capitalFirst() {
    	getInput = prompt("Enter some text below.");
    	firstChange = getInput.toLowerCase();
    	capitalizeChange = firstChange.toUpperCase(0);
    	return capitalizeChange;
    }
    function setToParagraph() {
    	document.getElementById("output").innerHTML = upperChange;
    	document.getElementById("output").innerHTML = lowerChange;
    	document.getElementById("output").innerHTML = capitalizeChange;
    }

最佳答案

您不需要从三个函数返回任何内容。您需要调用使用您已修改的文本更改段落值的函数。我对函数 capitalFirst 进行了更改。

        function uppercase() {
        getInput = prompt("Enter some text below.");
        upperChange = getInput.toUpperCase();
        setToParagraph(upperChange);
    }
    function lowercase() {
        getInput = prompt("Enter some text below.");
        lowerChange = getInput.toLowerCase();
        setToParagraph(lowerChange);
    }
    function capitalFirst() {
        getInput = prompt("Enter some text below.");
        firstChange = getInput.toLowerCase();
        capitalizeChange = firstChange.charAt(0).toUpperCase() + firstChange.slice(1);
        setToParagraph(capitalizeChange);
    }
    function setToParagraph(p) {
        document.getElementById("output").innerHTML = p;  
    }

关于javascript - 用 3 个按钮制作一个程序。文本输入将输出前的大小写改成p。如何进行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43624663/

相关文章:

css - 使用左侧高度设置右侧高度

javascript - 显示数组的前 4 个,然后显示后 4 个

javascript - window.sidebar.addPanel 不再在 Firefox 上运行

javascript - 使用 document.getElementById ("demo").innerHTML 进行打印

javascript - 为什么 Text.splitText() 会影响布局?

css - 星形 div 内的图像

javascript - 我可以在 Styled Component 中设置 Child 的 css 吗?

html - A11y 用于空 anchor 标签

html - 将 CSS 页脚保持在底部时出现问题

css - 部门边界不受尊重