Article directory
- Functional description
- full picture tagged version
- jquery simple image markup version
- Complete element background stamped version
- Add, delete, modify and check the full version
- Coordinate mapping, the coordinates will change according to the screen size
- hint
Function description
JavaScript
gets the relative coordinate position of the image when the mouse is clicked and adds custom content.
Full image tagged version
Rendering
html
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Coordinate point</title> <link rel="stylesheet" href="./index.css"> <script src="../node_modules/jquery/dist/jquery.min.js"></script> </head> <body class="height_100vh d_f jc_c ai_c bc_rgba_000_05"> <div id="idCDB" class="width_1000 height_686 p_r zi5"> <img class="width_100_ height_100_ zi6" src="../image/66_1000010.jpg" alt="Image failed to load" onclick="onclickF(event)"> </div> <script src="./index.js"></script> </body>
JavaScript
let oObj = {<!-- --> list: [ {<!-- --> id: "id_592_57_2564", x: 592, y: 57, xpx: "580px", ypx: "37px", deg: 0 }, {<!-- --> id: "id_577_362_2705", x: 577, y: 362, xpx: "565px", ypx: "342px", deg: 0 }, {<!-- --> id: "id_379_268_4292", x: 379, y: 268, xpx: "367px", ypx: "248px", deg: 0 }, {<!-- --> id: "id_347_545_6913", x: 347, y: 545, xpx: "335px", ypx: "525px", deg: 0 }, {<!-- --> id: "id_813_233_3573", x: 813, y: 233, xpx: "801px", ypx: "213px", deg: 0 }, {<!-- --> id: "id_497_75_3288", x: 497, y: 75, xpx: "485px", ypx: "55px", deg: 0 }, {<!-- --> id: "id_189_191_3383", x: 189, y: 191, xpx: "177px", ypx: "171px", deg: 0 }, {<!-- --> id: "id_237_221_8721", x: 237, y: 221, xpx: "225px", ypx: "201px", deg: 0 }, {<!-- --> id: "id_113_350_664", x: 113, y: 350, xpx: "101px", ypx: "330px", deg: 0 }, {<!-- --> id: "id_995_6_8922", x: 995, y: 6, xpx: "975px", ypx: "2px", deg: -135 }, {<!-- --> id: "id_4_3_7246", x: 4, y: 3, xpx: "4px", ypx: "3px", deg: 135 }, {<!-- --> id: "id_4_680_6831", x: 4, y: 680, xpx: "0px", ypx: "660px", deg: 45 }, {<!-- --> id: "id_998_683_3071", x: 998, y: 683, xpx: "978px", ypx: "663px", deg: -45 } ] }; /** * Page initialization */ (function initPage() {<!-- --> oObj.list.forEach(item => createElementF(item)); })(); /** * Get click coordinates and marker settings * @param {Number} offsetX The x-axis coordinate when clicked (the reference system is the current element) * @param {Number} offsetY The y-axis coordinate when clicked (the reference system is the current element) * @param {Number} width current element width * @param {Number} height current element height * element width */ function onclickF({<!-- --> offsetX, offsetY, target: {<!-- --> width, height } }) {<!-- --> let obj = {<!-- -->}, {<!-- --> deg, xpx, ypx } = handleIcon(offsetX, offsetY, width, height); obj.id = `id_${<!-- -->offsetX}_${<!-- -->offsetY}_${<!-- -->Math.floor(Math.random() * 10000 ) + 1}`; obj.x = offsetX; obj.y = offsetY; obj.xpx = xpx; obj.ypx = ypx; obj.deg = deg; oObj.list.push({<!-- --> ...obj }); createElementF({<!-- --> ...obj }); } /** * Handle icon display form * @param {Number} offsetX The x-axis coordinate when clicked (the reference system is the current element) * @param {Number} offsetY The y-axis coordinate when clicked (the reference system is the current element) * @param {Number} width element width * @param {Number} height element height * @returns {object} */ function handleIcon(offsetX, offsetY, width, height) {<!-- --> let deg = undefined, xpx = undefined, ypx = undefined; if (offsetX < 12 & amp; & amp; offsetY < 12) {<!-- --> // upper left corner deg = 135; xpx = `${<!-- -->offsetX}px`; ypx = `${<!-- -->offsetY}px`; } else if (width - offsetX < 12 & amp; & amp; offsetY < 12) {<!-- --> // top right corner deg = -135; xpx = `${<!-- -->offsetX - 20}px`; ypx = `${<!-- -->offsetY - 4}px`; } else if (width - offsetX < 12 & amp; & amp; height - offsetY < 12) {<!-- --> // bottom right corner deg = -45; xpx = `${<!-- -->offsetX - 20}px`; ypx = `${<!-- -->offsetY - 20}px`; } else if (height - offsetY < 12 & amp; & amp; offsetX < 12) {<!-- --> // bottom left corner deg = 45; xpx = `${<!-- -->offsetX - 4}px`; ypx = `${<!-- -->offsetY - 20}px`; } else if (offsetX < 12) {<!-- --> // left border deg = 90; xpx = `${<!-- -->offsetX}px`; ypx = `${<!-- -->offsetY - 12}px`; } else if (width - offsetX < 12) {<!-- --> // right border deg = -90; xpx = `${<!-- -->offsetX - 24}px`; ypx = `${<!-- -->offsetY - 12}px`; } else if (offsetY < 12) {<!-- --> // top border deg = 180; xpx = `${<!-- -->offsetX - 12}px`; ypx = `${<!-- -->offsetY}px`; } else if (height - offsetY < 12) {<!-- --> // bottom border deg = 0; xpx = `${<!-- -->offsetX - 12}px`; ypx = `${<!-- -->offsetY - 22}px`; } else {<!-- --> // other deg = 0; xpx = `${<!-- -->offsetX - 12}px`; ypx = `${<!-- -->offsetY - 20}px`; } return {<!-- --> deg, xpx, ypx }; } /** * Create elements and render * @param {string} id unique value * @param {string} ypx The coordinate after adding px unit * @param {string} ypx The coordinate after adding px unit * @param {number} deg The angle value of chart rotation */ function createElementF({<!-- --> id, xpx, ypx, deg }) {<!-- --> let src = '../image/coordinateDot.png', idCDB = document. querySelector('#idCDB'), imgEl = document. createElement('img'); imgEl.src = src; imgEl.className = 'width_24 height_24 p_a cursor_pointer zi7'; imgEl.style.left = xpx; imgEl.style.top = ypx; imgEl.style.transform = `rotate(${<!-- -->deg}deg)`; imgEl.id = id; imgEl.onclick = cancelF; idCDB.appendChild(imgEl); } /** * remove punctuation * @param {*} event */ function cancelF(event) {<!-- --> let id = event. target. id, arr = [...oObj. list], i = 0; for (; i < arr.length; i ++ ) if (arr[i].id === id) oObj.list.splice(i, 1); // event. target. remove(); event.target.parentNode.removeChild(event.target); }
jquery simple image markup version
Rendering
html
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Coordinate point JQ</title> <link rel="stylesheet" href="./demo.css"> <script src="../node_modules/jquery/dist/jquery.min.js"></script> </head> <body class="height_100vh d_f jc_c ai_c"> <div id="idCD" class="width_860 height_680 p_r zi5"> <img id="imageId" class="width_100_ height_100_zi6" src="../image/14_1110.jpg" onclick="handleClick(event)"> </div> <script src="./demo.js"></script> </body>
JavaScript
/** * Get click coordinates and marker settings * @param {*} event element node */ function handleClick(event) {<!-- --> let x = event.offsetX, y = event.offsetY, src = '../image/coordinateDot.png'; x = x - 12 + 'px'; y = y - 22 + 'px'; imgEl = `<img src="${<!-- -->src}" class="width_24 height_24 p_a cursor_pointer zi7" style="top: ${<!-- -->y}; left: ${ <!-- -->x};" />`; $('#idCD').append(imgEl); }
Full element background tagged version
Rendering
html
<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>Coordinate point mature version</title> <link rel="stylesheet" href="./mature.css"> </head> <body class="height_100vh d_f jc_c ai_c bc_rgba_68_68_86_05"> <div id="idCDB" class="width_1000 height_686 p_r zi5"> <img class="width_100_ height_100_ zi6" src="../image/06_110.jpg" alt="Image failed to load" onclick="onclickF(event)"> </div> <script src="./mature.js"></script> </body>
JavaScript
let oObj = {<!-- --> list: [ // upper left corner {<!-- --> id: 'id_0_0_1', x: 0, y: 0, xpx: '0px', ypx: '0px' }, // upper right corner {<!-- --> id: 'id_1000_0_2', x: 1000, y: 0, xpx: '989px', ypx: '0px' }, // bottom right corner {<!-- --> id: 'id_1000_686_3', x: 1000, y: 686, xpx: '989px', ypx: '675px' }, // bottom left corner {<!-- --> id: 'id_0_686_4', x: 0, y: 686, xpx: '0px', ypx: '675px' }, // left border {<!-- --> id: 'id_0_343_5', x: 0, y: 343, xpx: '0px', ypx: '338px' }, // right border {<!-- --> id: 'id_1000_343_6', x: 1000, y: 343, xpx: '989px', ypx: '338px' }, // top border {<!-- --> id: 'id_500_0_7', x: 500, y: 0, xpx: '495px', ypx: '0px' }, // bottom border {<!-- --> id: 'id_500_686_8', x: 500, y: 686, xpx: '495px', ypx: '675px' }, // middle {<!-- --> id: 'id_500_343_9', x: 500, y: 343, xpx: '495px', ypx: '338px' } ] }; /** * Page initialization */ (function initPage() {<!-- --> oObj.list.forEach(item => createElementF(item)); })(); /** * Get click coordinates and marker settings * @param {Number} offsetX The x-axis coordinate when clicked (the reference system is the current element) * @param {Number} offsetY The y-axis coordinate when clicked (the reference system is the current element) * @param {Number} width current element width * @param {Number} height current element height * element width */ function onclickF({<!-- --> offsetX, offsetY, target: {<!-- --> width, height } }) {<!-- --> let obj = {<!-- -->}, {<!-- --> xpx, ypx } = handleIcon(offsetX, offsetY, width, height); obj.id = `id_${<!-- -->offsetX}_${<!-- -->offsetY}_${<!-- -->Math.floor(Math.random() * 10000 ) + 1}`; obj.x = offsetX; obj.y = offsetY; obj.xpx = xpx; obj.ypx = ypx; oObj.list.push({<!-- --> ...obj }); createElementF({<!-- --> ...obj }); } /** * Handle icon display form * @param {Number} offsetX The x-axis coordinate when clicked (the reference system is the current element) * @param {Number} offsetY The y-axis coordinate when clicked (the reference system is the current element) * @param {Number} width element width * @param {Number} height element height * @returns {object} */ function handleIcon(offsetX, offsetY, width, height) {<!-- --> let xpx = undefined, ypx = undefined; if (offsetX < 10 & amp; & amp; offsetY < 10) {<!-- --> // upper left corner xpx = `${<!-- -->offsetX}px`; ypx = `${<!-- -->offsetY}px`; } else if (width - offsetX < 10 & amp; & amp; offsetY < 10) {<!-- --> // top right corner xpx = `${<!-- -->offsetX - 11}px`; ypx = `${<!-- -->offsetY}px`; } else if (width - offsetX < 10 & amp; & amp; height - offsetY < 10) {<!-- --> // bottom right corner xpx = `${<!-- -->offsetX - 11}px`; ypx = `${<!-- -->offsetY - 11}px`; } else if (height - offsetY < 10 & amp; & amp; offsetX < 10) {<!-- --> // bottom left corner xpx = `${<!-- -->offsetX}px`; ypx = `${<!-- -->offsetY - 11}px`; } else if (offsetX < 10) {<!-- --> // left border xpx = `${<!-- -->offsetX}px`; ypx = `${<!-- -->offsetY - 5}px`; } else if (width - offsetX < 10) {<!-- --> // right border xpx = `${<!-- -->offsetX - 11}px`; ypx = `${<!-- -->offsetY - 5}px`; } else if (offsetY < 10) {<!-- --> // top border xpx = `${<!-- -->offsetX - 5}px`; ypx = `${<!-- -->offsetY}px`; } else if (height - offsetY < 10) {<!-- --> // bottom border xpx = `${<!-- -->offsetX - 5}px`; ypx = `${<!-- -->offsetY - 11}px`; } else {<!-- --> // other xpx = `${<!-- -->offsetX - 5}px`; ypx = `${<!-- -->offsetY - 5}px`; } return {<!-- --> xpx, ypx }; } /** * Create elements and render * @param {string} id unique value * @param {string} ypx The coordinate after adding px unit * @param {string} ypx The coordinate after adding px unit */ function createElementF({<!-- --> id, xpx, ypx }) {<!-- --> let idCDB = document. querySelector('#idCDB'), divEl = document. createElement('div'); divEl.className = 'width_8 height_8 p_a bc_rgba_255_00_03 b_2s_rgba_00_255_05 radius_50_ cursor_pointer zi7'; divEl.style.left = xpx; divEl.style.top = ypx; divEl.id = id; divEl.onclick = cancelF; idCDB.appendChild(divEl); } /** * remove punctuation * @param {*} event */ function cancelF(event) {<!-- --> let id = event. target. id, arr = [...oObj.list], i = 0; for (; i < arr.length; i ++ ) if (arr[i].id === id) oObj.list.splice(i, 1); // event. target. remove(); event.target.parentNode.removeChild(event.target); }
Add, delete, modify and check the full version
html
<div id="idCDB" class="p_r zi5"> <img class="width_100_height_100_zi6" src="../image/66_1000010.jpg" alt="Image failed to load" onclick="onclickF(event)" > </div>
JavaScript
let oObj = {<!-- --> // New/View/Edit // 0 new // 1 view // 2 edit isCreate: 1, // default width (create/edit) w: 986, // default height (create/edit) h: 768, // width ratio wp: 1.35, // height ratio hp: 1.23, toFixedF: (val) => val.toFixed(3), list: [ {<!-- --> id: "id_527_296_6017", x: 527, y: 296, cxpx: 515, cypx: 276, xpx: "695.250", ypx: "339.480", deg: 0, icon: "../image/coordinateDot.png", status: 1 } ] }; /** * Page initialization */ (function initPage() {<!-- --> let idCDB = document. querySelector('#idCDB'); if ([0, 2]. includes(oObj. isCreate)) {<!-- --> idCDB.style.width = oObj.w + 'px'; idCDB.style.height = oObj.h + 'px'; if (oObj.isCreate === 0) {<!-- --> oObj.list = []; } else {<!-- --> oObj.list.forEach(item => createElementF(item)); } } else {<!-- --> idCDB.style.width = oObj.toFixedF(oObj.w * oObj.wp) + 'px'; idCDB.style.height = oObj.toFixedF(oObj.h * oObj.hp) + 'px'; oObj.list.forEach(item => createElementF(item)); } })(); /** * Get click coordinates and marker settings * @param {Number} offsetX The x-axis coordinate when clicked (the reference system is the current element) * @param {Number} offsetY The y-axis coordinate when clicked (the reference system is the current element) * @param {Number} width current element width * @param {Number} height current element height * element width */ function onclickF({<!-- --> offsetX, offsetY, target: {<!-- --> width, height } }) {<!-- --> if (oObj.isCreate === 0) {<!-- --> let list = oObj. list, i = 0; if (list. length) for (; i < list. length; i ++ ) document. getElementById(list[i]. id). remove(); oObj.list = []; } else if (oObj.isCreate === 1) {<!-- --> return false; } else if (oObj.isCreate === 2 & amp; & amp; oObj.list.length) {<!-- --> document.getElementById(oObj.list[0].id).remove(); oObj.list = []; } let obj = {<!-- -->}, {<!-- --> deg, cxpx, cypx, xpx, ypx } = handleIcon(offsetX, offsetY, width, height); obj.id = `id_${<!-- -->offsetX}_${<!-- -->offsetY}_${<!-- -->Math.floor(Math.random() * 10000 ) + 1}`; obj.x = offsetX; obj.y = offsetY; obj.cxpx = cxpx; obj.cypx = cypx; obj.xpx = xpx; obj.ypx = ypx; obj.deg = deg; // custom icon obj.icon = '../image/coordinateDot.png'; // 0 alarm (icon flashes red) // 1 normal (icon not blinking) // 2 offline (icon flashing yellow) // Created in normal state obj.status = 1; oObj.list.push({<!-- --> ...obj }); createElementF({<!-- --> ... oObj. list[0] }); } /** * Handle icon display form * @param {Number} offsetX The x-axis coordinate when clicked (the reference system is the current element) * @param {Number} offsetY The y-axis coordinate when clicked (the reference system is the current element) * @param {Number} width element width * @param {Number} height element height * @returns {object} */ function handleIcon(offsetX, offsetY, width, height) {<!-- --> let deg = undefined, cxpx = undefined, cypx = undefined, xpx = undefined, ypx = undefined; if (offsetX < 12 & amp; & amp; offsetY < 12) {<!-- --> // upper left corner deg = 135; cxpx = offsetX; cypx = offsetY; } else if (width - offsetX < 12 & amp; & amp; offsetY < 12) {<!-- --> // top right corner deg = -135; cxpx = offsetX - 20; cypx = offsetY - 4; } else if (width - offsetX < 12 & amp; & amp; height - offsetY < 12) {<!-- --> // bottom right corner deg = -45; cxpx = offsetX - 20; cypx = offsetY - 20; } else if (height - offsetY < 12 & amp; & amp; offsetX < 12) {<!-- --> // bottom left corner deg = 45; cxpx = offsetX - 4; cypx = offsetY - 20; } else if (offsetX < 12) {<!-- --> // left border deg = 90; cxpx = offsetX; cypx = offsetY - 12; } else if (width - offsetX < 12) {<!-- --> // right border deg = -90; cxpx = offsetX - 24; cypx = offsetY - 12; } else if (offsetY < 12) {<!-- --> // top border deg = 180; cxpx = offsetX - 12; cypx = offsetY; } else if (height - offsetY < 12) {<!-- --> // bottom border deg = 0; cxpx = offsetX - 12; cypx = offsetY - 22; } else {<!-- --> // other deg = 0; cxpx = offsetX - 12; cypx = offsetY - 20; } xpx = oObj.toFixedF(cxpx * oObj.wp); ypx = oObj.toFixedF(cypx * oObj.hp); return {<!-- --> deg, cxpx, cypx, xpx, ypx }; } /** * Create elements and render * @param {string} id unique value * @param {number} cxpx converted coordinates * @param {number} cypx converted coordinates * @param {number} xpx converted and enlarged coordinates * @param {number} ypx converted and enlarged coordinates * @param {string} deg image rotation angle * @param {string} icon custom icon * @param {string} status status (0 alarm (icon red flashing), 1 normal (icon not flashing), 2 offline (icon yellow flashing), it belongs to normal state when created) */ function createElementF({<!-- --> id, cxpx, cypx, xpx, ypx, deg, icon, status }) {<!-- --> let idCDB = document. querySelector('#idCDB'), imgEl = document. createElement('img'), classStr = 'width_24 height_24 p_a radius_50_'; classStr + = `${<!-- -->status === 0 ? ' keyframes_c01 padding_10 keyframes_c03' : ''}`; classStr + = `${<!-- -->[0, 2].includes(oObj.isCreate) ? ' cursor_pointer' : ''}`; imgEl.src = icon; imgEl.id = id; imgEl. className = classStr; imgEl.style.left = oObj.isCreate !== 1 ? `${<!-- -->cxpx}px` : `${<!-- -->xpx}px`; imgEl.style.top = oObj.isCreate !== 1 ? `${<!-- -->cypx}px` : `${<!-- -->ypx}px`; imgEl.style.transform = `rotate(${<!-- -->deg}deg)`; imgEl.onclick = cancelF; idCDB.appendChild(imgEl); } /** * remove punctuation * @param {*} event */ function cancelF(event) {<!-- --> if ([0, 2]. includes(oObj. isCreate)) {<!-- --> event.target.parentNode.removeChild(event.target); oObj.list = []; } }
Coordinate mapping, the coordinates will change according to the screen size
html
<div id="idCE" class="height_100vh d_f jc_c ai_c"></div>
JavaScript
let oObj = {<!-- --> // New/View/Edit // 0 new // 1 view // 2 edit // Default width and height width: 768, height: 500, isCreate: 2, toFixedF: (val) => {<!-- --> val = Math. round(val * 100) / 100; val = val.toFixed(2); return val; }, list: [ {<!-- --> idm: "idm_923_141_9532", idd: "idd_923_141_9532", offsetX: 923, width: 1998, height: 1405, offsetY: 141, status: 1 } ] }; /** * Page initialization */ function initPage() {<!-- --> let idCE = document. getElementById('idCE'), temp = '<div id="idCDB" class="zi5 p_r"><img class="width_100_ height_100_ zi6" src="../image/09_1001.jpg" onclick="onclickF(event)"></div >'; idCE.innerHTML = temp; let idCDB = document. querySelector('#idCDB'); // Get screen width and height let clientWidth = document.documentElement.clientWidth, clientHeight = document.documentElement.clientHeight; // Set element width and height oObj.width = clientWidth; oObj.height = clientHeight; idCDB.style.width = oObj.width + 'px'; idCDB.style.height = oObj.height + 'px'; if ([0, 2]. includes(oObj. isCreate)) {<!-- --> if (oObj.isCreate === 0) {<!-- --> oObj.list = []; } else {<!-- --> oObj.list.forEach(item => createElementF(item)); } } else {<!-- --> oObj.list.forEach(item => {<!-- --> createElementF(item); if (item. status === 0) createCTB(item); }); } } initPage(); /** * Click event (create or edit) */ function onclickF({<!-- --> offsetX, offsetY }) {<!-- --> let obj = {<!-- -->}, id = `${<!-- -->offsetX}_${<!-- -->offsetY}_${<!-- -->Math.floor(Math.random() * 10000) + 1 }`; if (oObj.isCreate === 0) {<!-- --> let list = oObj. list, i = 0; if (list. length) for (; i < list. length; i ++ ) document. getElementById(list[i]. idm). remove(); oObj.list = []; } else if (oObj.isCreate === 1) {<!-- --> return false; } else if (oObj.isCreate === 2 & amp; & amp; oObj.list.length) {<!-- --> document.getElementById(oObj.list[0].idm).remove(); oObj.list = []; } obj.idm = `idm_${<!-- -->id}`; obj.idd = `idd_${<!-- -->id}`; obj.offsetX = offsetX; obj.width = oObj.width; obj.height = oObj.height; obj.offsetY = offsetY; obj.offsetY = offsetY; // 0 alarm (icon flashes red) // 1 normal (icon not blinking) // 2 offline (icon flashing yellow) // Created in normal state obj.status = 1; oObj.list.push({<!-- --> ...obj }); console.log(oObj.list[0]); createElementF(oObj. list[0]); } /** * Create thumbnail elements */ function createElementF({<!-- --> idm, width, height, offsetX, offsetY }) {<!-- --> let idCDB = document. querySelector('#idCDB'), imgEl = document. createElement('img'), left = 0, top = 0, classStr = 'width_20 height_20 p_a zi8'; classStr + = `${<!-- -->[0, 2].includes(oObj.isCreate) ? ' cursor_pointer' : ''}`; left = offsetX * (oObj. width / width); top = offsetY * (oObj. height / height); left = oObj.toFixedF(left); top = oObj.toFixedF(top); imgEl.id = idm; imgEl. className = classStr; imgEl.src = '../image/coordinateDot.png'; imgEl.style.left = `${<!-- -->left - 10}px`; imgEl.style.top = `${<!-- -->top - 20}px`; imgEl.onclick = cancelF; idCDB.append(imgEl); } /** * Create alarm effects */ function createCTB({<!-- --> idd, width, height, offsetX, offsetY }) {<!-- --> let idCDB = document. querySelector('#idCDB'), div = document. createElement('div'), left = 0, top = 0; left = offsetX * (oObj. width / width); top = offsetY * (oObj. height / height); div.id = idd; div.className = 'width_50 height_50 p_a zi7 keyframes_c03 radius_50_'; div.style.left = `${<!-- -->left - 25}px`; div.style.top = `${<!-- -->top - 34}px`; idCDB.append(div); } /** * remove punctuation * @param {*} event */ function cancelF(event) {<!-- --> if ([0, 2]. includes(oObj. isCreate)) {<!-- --> event.target.parentNode.removeChild(event.target); oObj.list = []; } }
Hint
onclick"
will be triggered when clicked, but the code assigned fromCSDN
to the editor may change theonclick
o
, the code does not report an error at this time, and there is no interactive response. When the mouse is placed on theo
ofonclick
, thecharacter appears U+03bf "ο" may be confused with the ASCII character U+006f "o", which is more common in source code.
Hint, just deleteonclick
Write to solve problems.