Home:ALL Converter>how to add random position by left side in css but using for setting java sript?

how to add random position by left side in css but using for setting java sript?

Ask Time:2022-09-01T07:41:33         Author:maslori production

Json Formatter

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 


<!DOCTYPE html>
    <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">

    <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>


    padding: 0;

    width: 400px;
    height: 150px;
    border: 2px solid black;

    top: 300px;
    position: relative;
    width: 100;
    height: 100;

Author:maslori production,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/73562938/how-to-add-random-position-by-left-side-in-css-but-using-for-setting-java-sript
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>",