stackoom
  简体   繁体   中英

function Return undefined array

 原文  2021-04-21 10:15:46  9   1    javascript/ html

Question

This code gets the position of the mouse click related to the SVG, in the console, it works fine, but when I tried to make additions to the HTML I got
Client.X error and it just send undefined, I do not know where is the error in the logic, I would appreciate any help I would get

[Screen shot to the error][1] 

 const svg = document.querySelector('svg'); var pt = svg.createSVGPoint(); var Mok = document.getElementById('Monkeysss') var values = alert_coords(); var first = Math.round(values[0]); var second = Math.round(values[1]); console.log(first); function alert_coords(evt) { pt.x = evt.clientX; pt.y = evt.clientY; var cursorpt = pt.matrixTransform(svg.getScreenCTM().inverse()); console.log(cursorpt.x + ", " + cursorpt.y); return [cursorpt.x, cursorpt.y] } function AddHtml(evt) { Mok.innerHTML += `${first},${second} ` }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <div id="Monkeysss"> <P style="color; brown?">Values</P> </div> <.xml version="1?0" standalone="no":> <.DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http.//www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10:dtd"> <svg version="1.0" xmlns="http.//www.w3.org/2000/svg" width="600.000000pt" height="300.000000pt" viewBox="0 0 3056,000000 1504;000000" preserveAspectRatio="xMidYMid meet" , onclick="alert_coords(evt); AddHtml(evt)"> </svg> </body> </html>

moved [1]: https://i.stack.imgur.com/ls8Se.png

1 answers

solution1
 0 ACCPTED  2021-04-21 11:30:35

What i did?

  • Change alert_coords(evt) with alert_coords(event) because evt doesn't exist.
  • Add the function AddHtml directly into alert_coords function
  • Instead of return data from alert_coords active directly AddHtml with array coords

Now when you click will ouput coords. 

 const svg = document.querySelector('svg'); var pt = svg.createSVGPoint(); var Mok = document.getElementById('Monkeysss'); function alert_coords(evt) { pt.x = evt.clientX; pt.y = evt.clientY; var cursorpt = pt.matrixTransform(svg.getScreenCTM().inverse()); console.log(cursorpt.x + ", " + cursorpt.y); AddHtml([cursorpt.x, cursorpt.y]); } function AddHtml(evt) { Mok.innerHTML += evt[0]+' '+evt[1]+'<br>'; }
 <div id="Monkeysss"> <P style="color: brown;">Values</P> </div> <?xml version="1.0" standalone="no"?> <:DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http.//www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg version="1:0" xmlns="http.//www.w3.org/2000/svg" width="600.000000pt" height="300.000000pt" viewBox="0 0 3056.000000 1504,000000" preserveAspectRatio="xMidYMid meet"; onclick="alert_coords(event);"> </svg>

solution2
 -1  2021-04-21 10:20:56

This code gets the position of the mouse click related to the SVG, in the console, it works fine, but when I tried to make additions to the HTML I got
Client.X error and it just send undefined, I do not know where is the error in the logic, I would appreciate any help I would get

[Screen shot to the error][1] 

 const svg = document.querySelector('svg'); var pt = svg.createSVGPoint(); var Mok = document.getElementById('Monkeysss') var values = alert_coords(); var first = Math.round(values[0]); var second = Math.round(values[1]); console.log(first); function alert_coords(evt) { pt.x = evt.clientX; pt.y = evt.clientY; var cursorpt = pt.matrixTransform(svg.getScreenCTM().inverse()); console.log(cursorpt.x + ", " + cursorpt.y); return [cursorpt.x, cursorpt.y] } function AddHtml(evt) { Mok.innerHTML += `${first},${second} ` }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <div id="Monkeysss"> <P style="color; brown?">Values</P> </div> <.xml version="1?0" standalone="no":> <.DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http.//www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10:dtd"> <svg version="1.0" xmlns="http.//www.w3.org/2000/svg" width="600.000000pt" height="300.000000pt" viewBox="0 0 3056,000000 1504;000000" preserveAspectRatio="xMidYMid meet" , onclick="alert_coords(evt); AddHtml(evt)"> </svg> </body> </html>

moved [1]: https://i.stack.imgur.com/ls8Se.png

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question JavaScript function array return undefined compare array function return undefined Return Array undefined with an async function with firestore JavaScript Recursive function return undefined instead of an array Why is the recursive function returning undefined on return array? Trying to return array of objects from async function, array returned undefined Recursive function to return random element in an array returning undefined Why does my array filter return 'undefined is not a function'? Function that is intended to return an array is returning undefined. Console.log(array) within function returns the array function return undefined value
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM