Extracting span values on keypress with tampermonkey

Question

(I am mainly working with Matlab but i need some input data from a webpage to make it run. I'm entirly new to Javascript and any form of Grease/Tampermonkey.)

---

My intend is to get four certain span values everytime I press a key button from a webpage. I want to stack those values in an array and export them later into a csv.

The span values change on mouseover on the page. Idealy I move to cursor to the Data I need to get, press a key and get the Data saved.

I cannot get any of this to work. Using this function to call the Data, since there are 4 values with the same ClassName I am intending to cycle through the Index to get them all.

function readvalue(index){

    let text = document.getElementsByClassName("pane-legend-item-value")[index].innerhtml;

}

Maybe something like this to call on the kreypress?

if (event.key === "Enter") {
    event.preventDefault();

    let v1 = readvalue(0);
    let v2 = readvalue(1);
    let v3 = readvalue(2);
    let v4 = readvalue(3);
    console.log(v1);
}

I would love to get some help here! Feel free to message me on Email if you have some spare minutes to help me out. ([email protected])

I appreciate you reading this.

Cheers, Malte

Answer 1

Store Solution

One solution is to store the value on a mouseover event and print the stored value when you press the enter key.

I think this solution is a bit tricky to get the correct value on a bigger webpage.

let valueStore = '';

document.querySelectorAll('.pane-legend-item-value').forEach(function(elem) {
    elem.addEventListener("mouseleave", function(event) {
        valueStore = '';
        elem.style.backgroundColor = '#ffffff';
    });
    
    elem.addEventListener("mouseover", function(event) {
        valueStore = event.target.innerHTML;
        elem.style.backgroundColor = '#ff0000';
    });
});

document.addEventListener('keyup', function() {
    if (event.key === "Enter") {
        console.log(valueStore);
    }
});

<div class="pane-legend-item-value">value 1</div>
<div class="pane-legend-item-value">value 2</div>
<div class="pane-legend-item-value">value 3</div>
<div class="pane-legend-item-value">value 4</div>

Position Solution

the other solution is to store the mouse position and get the element with the elementFromPoint method. But what happens when two elements are on top of each other?

let x;
let y;

document.onmousemove = function(event){
    event = event || window.event;
    x = event.clientX;
    y = event.clientY;
};

function getElementAtMousePosition() {
    return document.elementFromPoint(x,y);
}

document.addEventListener('keyup', function() {
    if (event.key === "Enter") {
        console.log(getElementAtMousePosition().innerHTML);
    }
});

<div class="pane-legend-item-value">value 1</div>
    <div class="pane-legend-item-value">value 2</div>
    <div class="pane-legend-item-value">value 3</div>
    <div class="pane-legend-item-value">value 4</div>