What's the reason behind receiving [object HTMLParagraphElement]?

Question

What's the reason behind receiving [object HTMLParagraphElement]?

New to coding, sharing my code here:

<html>
  <head>
    <script type="text/javascript">
      function replyOne () {
        document.getElementById("comment_content").value = document.getElementById("username")
      }
    </script>
  </head>
  <body>
    <p id="username">Jack</p>
    <textarea id="comment_content" ></textarea>
    <button onclick="replyOne()">Copy Text</button>
  </body>
</html>

When I press the button, I anticipate 'Jack' will be copied to the textarea. However, it merely displays '[object HTMLParagraphElement]'.

javascript

Answer 1

Answer №1

Here is the correct way to achieve it:

document.querySelector("#comment_content").value =
    document.getElementById("user").innerText

If you omit the .innerText, the code will attempt to copy the whole element instead of just its text content.

Answer 2

Here is the correct way to achieve it:

document.querySelector("#comment_content").value =
    document.getElementById("user").innerText

If you omit the .innerText, the code will attempt to copy the whole element instead of just its text content.

Answer 3

Answer №2

Utilizing textContent, innerText, and innerHTML is common practice. However, it's important to note that two of them are specific to certain browsers, while innerHTML can be used across three major web browsers.

In addition, you have the option to parse the DOM using a combination of parent-child elements to extract the necessary value.

 function replyOne () {
    document.getElementById("comment_content").value=document.getElementById("username").innerHTML;

    //OR 
    document.getElementById("comment_content").value=document.getElementById("username").textContent;

    }

Answer 4

Utilizing textContent, innerText, and innerHTML is common practice. However, it's important to note that two of them are specific to certain browsers, while innerHTML can be used across three major web browsers.

In addition, you have the option to parse the DOM using a combination of parent-child elements to extract the necessary value.

 function replyOne () {
    document.getElementById("comment_content").value=document.getElementById("username").innerHTML;

    //OR 
    document.getElementById("comment_content").value=document.getElementById("username").textContent;

    }

Answer 5

Answer №3

To find the information you need, simply utilize the obj.innerText attribute and watch as the issue is resolved:

var element = document.getElementById("comment_body");
var content = element.innerText;
alert(content);

Answer 6

To find the information you need, simply utilize the obj.innerText attribute and watch as the issue is resolved:

var element = document.getElementById("comment_body");
var content = element.innerText;
alert(content);

Answer 7

Answer №4

Here is a solution using [objectHTMLParagraphElement] as an example

var selection = document.getElementById('ex').innerHTML; // If innerHTML is not used, it will display [objectHTMLParagraphElement]
var text = selection + "Hello";    
document.write(text); // The output will be Hello

Answer 8

Here is a solution using [objectHTMLParagraphElement] as an example

var selection = document.getElementById('ex').innerHTML; // If innerHTML is not used, it will display [objectHTMLParagraphElement]
var text = selection + "Hello";    
document.write(text); // The output will be Hello

What's the reason behind receiving [object HTMLParagraphElement]?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Don't leap to the top of the page, take your time!

Strategies for breaking down and streamlining Drag-And-Drop code into more manageable sections

State in Vuex is failing to update effectively when actions are being utilized

Interactive webpages with dynamic HTML content, similar to the design of popular platforms such

Evaluating the use of promise in Angular using Jasmine testing

Tips for dynamically adapting PATCH method content

Eliminate individuals from the Firebase database

My goal is to automatically generate video subtitles using the npm package ffmpeg-fluent in Node.js when a video is uploaded from the React front-end

The rejection of the WordPress custom plugin was due to the use of the reason 'Directly accessing core loading files'

Having difficulties obtaining sorted results for an e-commerce website API using Node.js

Transfer the script from package.json to an npm package

Tips for reorganizing the JSON data created by Artoo.js?

The 'ngSwitchDefault' property cannot be bound to because it is not recognized as a valid property of the 'ng-template' component

Is there a way to locate the starting position of a specific portion within a string?

Unique option preservation on customized HTML select menus - Maintain original selection

The Javascript array does not function like a typical array

Adding content to an empty element will not produce the desired result

Differences in Angular.js/jQuery html string parsing between versions 1.9.1 and 1.8.3

axios is refusing to update or be uninstalled

declaration of function interface and property that cannot be modified