How do you get html attributes in a javascript function with a variable element?

Question

When a user clicks on an element in my HTML, I want a new tab to appear in their browser and the attributes of the element they clicked on to be printed in that window.

This is a typical element in the HTML:

<a id="d0e110" onclick="GetWordFile(this.id)" attr1="attr1_value" attr2="attr2_value" attr3="attr3_value">ElementContent</a>

There are many such elements. The UID is generated for each one during the XLST transformation ('id="{generate-id()}"').

This is my current javascript function:

            <script>
                function GetWordFile(id) {
                var opened = window.open("");
                opened.document.write();
                }
            </script>

If the last line of the function is "opened.document.write(id);", and an element is clicked, then the new window displays the correct UID for the clicked element. So the connection has been successfully established.

However, I cannot make any other attributes of the element appear in the new window. The following function, for example, produces a blank new window:

            <script>
                function GetWordFile(id) {
                var opened = window.open("");
                opened.document.write(attr1);
                }
            </script>

So does trying to get the attribute as a variable:

            <script>
                function GetWordFile(id) {
                var opened = window.open("");
                var a1 = getAttribute("attr1");
                opened.document.write(a1);
                }
            </script>

I've also tried substituting inner HTML for document.write.

Can anyone identify what I am doing wrong and what my next steps should be?

Answer 1

You can pass this.attributes to the function, .filter() attributes that are not onclick , .map() the .value of the attributes to an array

 <script> function GetWordFile(attrs) { attrs = [...attrs].filter(attr => { return attr.name !== "onclick" }).map(attr => attr.value); console.log(attrs); } </script> <a id="d0e110" onclick="GetWordFile(this.attributes)" attr1="attr1_value" attr2="attr2_value" attr3="attr3_value">ElementContent</a> 

Answer 2

You need to call getAttribute() as a method of the element, which you can get using document.getElementById() .

function GetWordFile(id) {
    var el = document.getElementById(id);
    var attr1 = el.getAttribute('attr1');
    var opened = window.open("");
    opened.document.write(attr1);
}

Instead of passing this.id as the function argument, you might consider just passing this . Why force the function to search for the element when you can just provide it directly? Then the function would be like:

function GetWordFile(el) {
    var attr1 = el.getAttribute('attr1');
    var opened = window.open("");
    opened.document.write(attr1);
}

Answer 3

When you are loading a new window you are creating a new document that does not necessarily know that any other documents exist. In order for the document to know that any other documents exist you must pass in the desired information as a parameter so as mentioned above.

onclick="someFunction(this)" // which passes in the current scope 
// you could then define someFunction like so to get the desired
// result
function someFunction ( htmlObject ) {
attributeList = htmlObject.attributes;
attributeArray = [...attributeList];//now can perform arrayfunctions
let a = "";
for (value in attributeArray) {
a += attributeArray[value].value + " "; // creates a string of 
attributes
}
let s = window.open("");
s.document.write(a)}

Note you probably want to do some array filtering because it will return all attributes but the general principle works.