i tried to add the random placement of "text2" but when i press button the left = 0 and nothin else , i used math random, if i will setting direct postion settings thats will works " for example title.setAttribute("style", "color: red; position: relative; left: 100px;"
but if i use the random that doesn`t work, the title is staying always at the same position but random show the numbers what should to move the title to the other place .....
sorry for my english :)
Java Script
function pos(argument) {
var title = document.getElementById("text1");
var pos2 = Math.floor(Math.random() * 300) +200 ;//random numbers from 200 to 300 pos
title.setAttribute("style", "color: red; position: relative; left:" + pos2 +";" );// style setting
console.log(pos2);
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div id="sheet"><div id="block" style="background-color:red ; width: 100px; height: 100px; position: relative; left:0px;"></div></div>
<div id="button"><button type="button" onclick="pos()">something</button></div>
<h1 id="text1" style="color:blue; left: 100px; position: relative;">title</h1>
</body>
</html>
CSS
*{
padding: 0;
}
#sheet{
width: 400px;
height: 150px;
border: 2px solid black;
}
#button{
top: 300px;
position: relative;
width: 100;
height: 100;
}
Imam Baihaqi :
Your problem is in javascript\n\r\n\r\n function pos(argument) {\n var title = document.getElementById(\"text1\");\n var pos2 = Math.floor(Math.random() * 300) +200 ;//random numbers from 200 to 300 pos\n title.setAttribute(\"style\", \"color: red; position: relative; left:\" + pos2 +\"px\" );// style setting \nconsole.log(pos2);\n}\r\n*{\n padding: 0;\n}\n\n\n#sheet{\n width: 400px;\n height: 150px;\n border: 2px solid black;\n}\n\n#button{\n top: 300px;\n position: relative;\n width: 100px;\n height: 100px;\n}\r\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n <title>Doc</title>\n</head>\n<body>\n <div id=\"sheet\"><div id=\"block\" style=\"background-color:red ; width: 100px; height: 100px; position: relative; left:0px;\"></div></div>\n <div id=\"button\"><button type=\"button\" onclick=\"pos()\">something</button></div>\n <h1 id=\"text1\" style=\"color:blue; left: 100px; position: relative;\">title</h1>\n\n <script >\n \n </script>\n</body>\n</html>",
2022-09-01T01:38:41