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

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

CodePudding user response：

i found problem, just should to add px to the ;

   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  "px;" );// style setting 
    console.log(pos2);
    }

CodePudding user response：

Your problem is in javascript

 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  "px" );// style setting 
console.log(pos2);
}

*{
  padding: 0;
}


#sheet{
  width: 400px;
  height: 150px;
  border: 2px solid black;
}

#button{
  top: 300px;
  position: relative;
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<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>Doc</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>

    <script >
     
    </script>
</body>
</html>