Web mouse clicks to create elements, hot spots, markers, coordinates, punctuation, mapping, querySelector, createElement, appendChild, removeChild, splice, target

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

originCD

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

jqCD

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

matureCD

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 from CSDN to the editor may change the onclick o, the code does not report an error at this time, and there is no interactive response. When the mouse is placed on the o of onclick, the character appears U+03bf "ο" may be confused with the ASCII character U+006f "o", which is more common in source code.Hint, just delete onclick Write to solve problems.