Всех приветствую!
Собственно вопрос в заголовке темы.
Скриншот: здесь
Вывожу коорд. курсора мыши и в элементы, созданные js, так и в элемент , который уже присутствует в разметке.
Код для воспроизведения эффекта:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>P5j Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script>
let inputX;
let inputY;
let elemP;
function setup() {
let canvas = createCanvas(500, 500);
background(64);
canvas.parent('sketch-container');
inputX = createInput('EmptyX');
inputX.position(100, 100);
inputY = createInput('EmptyY');
inputY.position(100, 130);
elemP = document.getElementById("Coords");
}
function draw() {
background(128);
elemP.textContent=`x: ${mouseX} y: ${mouseY}`;
//text(`x: ${mouseX} y: ${mouseY}`, 100, 70);
if ( (mouseX>0 && mouseX < 500) && (mouseY>0 && mouseY < 500) )
{
inputX.value(mouseX);
inputY.value(mouseY);
}
else
{
inputX.value('---');
inputY.value('---');
}
if ( (mouseX>0 && mouseX < 500) && (mouseY>0 && mouseY < 500) )
{
ellipse(mouseX, mouseY, 15, 15);
}
}
</script>
<style type="text/css">
body {
font-family:"Arial";
color:#493628;
background:#C0C0C0}
</style>
</head>
<body>
<center>
<h1>Приветствую Вас в P5j!</h1>
<p="status">* * *</p>
<p id="Coords"> </p>
<div id="sketch-container">
</div>
<p>* * *</p>
<p>20 Марта 2025 by Gyros</p>
</center>
</body>
</html>
Заранее благодарю за осмысленные ответы и замечания.
