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

时间:2017-01-24 04:59:41

标签: javascript html

刚刚开始一个Web编程课程,需要一点任务帮助。它说“将新段落元素中的所有文本复制到名称为input-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);

HTML:

<!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>

2 个答案:

答案 0 :(得分:0)

你唯一需要的是为段落添加事件监听器(click事件),如下所述。

&#13;
&#13;
document.getElementById('foo').addEventListener('click', function(){
  document.getElementById('bar').value = this.innerHTML;
});
&#13;
<p id="foo">Click me to set input text</p>
<input id="bar" type="text">
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我认为你期望这个结果,不是,只是问你还想要什么?

shuffle_range[batch_size*j+i]
var howdyElement, nameInputElement, nameOutputElement, submitNameButton, webappideaElement;

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

submitNameButton.addEventListener("click", function () {
  var 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');
       }
  nameInputElement.value="";
       nameInputElement.value=howdyElement.innerText;
});

相关问题