段落をクリックしたときにテキストをテキストボックスにコピー

ウェブプログラミングクラスを開始するだけで、割り当てに少し助けが必要です。それは "あなたの新しい段落要素の中のすべてのテキストを名前入力のIDを持つテキストボックスにコピーする"と書かれています。これはこれまで私が持っていたものです。段落をクリックしたときにテキストをテキストボックスにコピー

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>

出典

2017-01-24 Matthew Valdez

は、あなたの段落内の1個のアンカータグを入れて、そのアンカータグにJavaScript関数を呼び出すと、あなたの段落に値を割り当てます。 idセレクタを段落に割り当てます。 – Rahul

サンプルHTMLを追加できますか？ – RajSan

ちょうどRajeshをしました。 –

あなたが必要とする唯一の事は、私は以下に述べるように、段落の（イベントをクリックしてください）イベントリスナーを追加すること、です。

document.getElementById('foo').addEventListener('click', function(){ 
 
    document.getElementById('bar').value = this.innerHTML; 
 
});

<p id="foo">Click me to set input text</p> 
 
<input id="bar" type="text">

出典

2017-01-24 05:31:07 marmeladze

私はあなたがこの結果を期待だと思う、それはない、ちょうどあなたが欲しい他に何頼みますか？

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; 
 
});

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

出典

2017-01-24 05:43:34 RajSan

段落をクリックしたときにテキストをテキストボックスにコピー

答えて

関連する問題