Javascript 单击段落时将文本复制到文本框中_Javascript_Html

Javascript 单击段落时将文本复制到文本框中

javascript html

Javascript 单击段落时将文本复制到文本框中,javascript,html,Javascript,Html,刚开始一门网络编程课程，需要一些作业方面的帮助。它说“将新段落元素中的所有文本复制到id为name input的文本框中。”这就是我到目前为止所做的 JS: document.addEventListener('DOMContentLoaded', function () { 'use strict'; // Enforce stricter JavaScript rules. // Declare this function's local variables. v

刚开始一门网络编程课程，需要一些作业方面的帮助。它说“将新段落元素中的所有文本复制到id为name input的文本框中。”这就是我到目前为止所做的

JS:

document.addEventListener('DOMContentLoaded', function () {

    'use strict'; // Enforce stricter JavaScript rules.

    // Declare this function's local variables.
    var howdyElement, nameInputElement, nameOutputElement, submitNameButton webappideaElement;

    // Find all needed elements and save them in variables.
    nameInputElement = document.querySelector('#name-input');
    submitNameButton = document.querySelector('#submit-name');
    howdyElement = document.querySelector('#howdy');
    nameOutputElement = document.querySelector('#name-output');
    webappideaElement = document.querySelector('#webappidea');

    // Make things happen when a user clicks on the button element.
    submitNameButton.addEventListener('click', function () {
        var name;

        // Get the string value out of the input textbox.
        name = nameInputElement.value;

        if (name.length === 0) {
            // The user didn't input a name, so use a default.
            nameOutputElement.textContent = 'student';
            howdyElement.classList.remove('enthusiastic');
        } else {
            // The user did input a name, so use it.
            nameOutputElement.textContent = name;
            // Make the paragraph stand out more.
            howdyElement.classList.add('enthusiastic');
        }
    }, false);

}, false);

<!DOCTYPE html>
<html lang="en-US"><head>

    <meta charset="UTF-8" />
    <title>Gotta start somewhere</title>


    <!-- Import a CSS stylesheet to style the page. -->
    <link href="style.css" rel="stylesheet" />

</head><body>

    <!-- Page content goes here.  Elements can be nested inside other elements. -->
    <h1>Welcome to CS 3312</h1>
    <p>
        What is your name?&nbsp;
        <input id="name-input" type="text" />
        <button id="submit-name" type="button">Submit it</button>
    </p>
    <p class="greeting" id="howdy">
        Howdy, <span id="name-output">student</span>!
    </p>

    <h2>Brainstorms</h2>
    <p class="info" id="webappidea"> Text</p>

    <!-- Import a JavaScript script to add interactivity to the page. -->
    <script src="script.js"></script>

</body></html>

HTML:

document.addEventListener('DOMContentLoaded', function () {

    'use strict'; // Enforce stricter JavaScript rules.

    // Declare this function's local variables.
    var howdyElement, nameInputElement, nameOutputElement, submitNameButton webappideaElement;

    // Find all needed elements and save them in variables.
    nameInputElement = document.querySelector('#name-input');
    submitNameButton = document.querySelector('#submit-name');
    howdyElement = document.querySelector('#howdy');
    nameOutputElement = document.querySelector('#name-output');
    webappideaElement = document.querySelector('#webappidea');

    // Make things happen when a user clicks on the button element.
    submitNameButton.addEventListener('click', function () {
        var name;

        // Get the string value out of the input textbox.
        name = nameInputElement.value;

        if (name.length === 0) {
            // The user didn't input a name, so use a default.
            nameOutputElement.textContent = 'student';
            howdyElement.classList.remove('enthusiastic');
        } else {
            // The user did input a name, so use it.
            nameOutputElement.textContent = name;
            // Make the paragraph stand out more.
            howdyElement.classList.add('enthusiastic');
        }
    }, false);

}, false);

<!DOCTYPE html>
<html lang="en-US"><head>

    <meta charset="UTF-8" />
    <title>Gotta start somewhere</title>


    <!-- Import a CSS stylesheet to style the page. -->
    <link href="style.css" rel="stylesheet" />

</head><body>

    <!-- Page content goes here.  Elements can be nested inside other elements. -->
    <h1>Welcome to CS 3312</h1>
    <p>
        What is your name?&nbsp;
        <input id="name-input" type="text" />
        <button id="submit-name" type="button">Submit it</button>
    </p>
    <p class="greeting" id="howdy">
        Howdy, <span id="name-output">student</span>!
    </p>

    <h2>Brainstorms</h2>
    <p class="info" id="webappidea"> Text</p>

    <!-- Import a JavaScript script to add interactivity to the page. -->
    <script src="script.js"></script>

</body></html>


总得找个地方开始
欢迎来到CS3312

你的名字叫什么？
提交


你好，学生！

头脑风暴
文本

您只需要为段落添加事件监听器（单击事件），如下所述

document.getElementById（'foo'）.addEventListener（'click'，function（）{
document.getElementById（'bar'）。value=this.innerHTML；
});
单击我设置输入文本
我想你是期待这个结果的，不是，只是问问你还想要什么

var howdeyelement、nameInputElement、nameOutputElement、submitNameButton、webappideaElement；
//找到所有需要的元素并将它们保存在变量中。
nameInputElement=document.getElementById（'name-input'）；
submitNameButton=document.getElementById（'submit-name'）；
howdeyelement=document.getElementById（'howdy'）；
nameOutputElement=document.getElementById（'name-output'）；
webappideaElement=document.getElementById（'webappidea'）；
submitNameButton.addEventListener（“单击”），函数（）{
var name=nameInputElement.value；
如果（name.length==0）{
//用户没有输入名称，因此使用默认名称。
nameOutputElement.textContent='student'；
howdeyelement.classList.remove（'invential'）；
}否则{
//用户确实输入了一个名称，所以请使用它。
nameOutputElement.textContent=名称；
//使这一段更加突出。
howdeyelement.classList.add（'热情'）；
}
nameInputElement.value=“”；
nameInputElement.value=howdyElement.innerText；
});

你的名字叫什么？
提交


你好，学生！

头脑风暴
Text
在段落内放置一个锚定标记，并在该锚定标记上调用javascript函数，为段落赋值。为段落指定id选择器。是否可以添加示例html？变量声明中的两个标识符之间缺少逗号：submitNameButton webappideaElement
。