[Melkor333]

okay, i recently started with javascript, and I'm messing a little around to learn how i can use it for webdev.
Now i wanted to make a script which adds a text somewhere on the page whenever the user presses enter.
Spoiler (Click to View)
I want to improve it later, so that a part is server sided and a user can write some text which will show up instead of 'TEST'. But that's not the problem right now... 😝




The problem is, the distance to the top becomes more, thus the page becomes longer. And sometimes the text doesn't appear on the screen (I'm pretty sure it's inserted outside of the window..)

The code is this atm:

PHP Code


<?php 
<html>
<head>
<script>
var idName = 0 //paragraph's id.

function createp() {
    var text = '<p id="'+ idName +'";>TEST</p>';
    var left = Math.floor(Math.random() * 90) + 5;
    var top = Math.floor(Math.random() * 90) + 5;

    document.getElementById('field').innerHTML += text; 
    var paragraph = document.getElementById(idName);
    paragraph.style.webkitTransform = "rotate(" +(Math.floor(Math.random() * 360))+"deg)";
    paragraph.position = 'relative';
    paragraph.style.top = top+'%'; // tried with px, with bottom instead of top
    paragraph.style.left = left+'%'; // this works just fine..
};

var test = function(event) {
    if (event.keyCode == 13 || event.which == 13){
    idName += 1;
    createp() };
};


</script>
</head>
<body id='field'; onkeypress='test(event)'; style='background-color:green';>
</body>
</html> 


(idk why, but the html tags didn't work..)


Oh and if you see some outdated or stupid methods, please tell me!!!

Thhx alot in advance! 🤝

[JumpWar]

Look at what I made

Code

<html >
<head>
<style>
    p {
      display: inline-block;
      position: absolute;
    }
</style>
<script>
var idName = 0 //paragraph's id.

function createp() {
    var text = document.createElement("p");
    text.innerHTML = "TEST";
    var left = Math.floor(Math.random() * 90) + 5;
    var top = Math.floor(Math.random() * 90) + 5;

    document.getElementById('field').appendChild(text); //Work on the DOM
    var paragraph = text;
    paragraph.style.webkitTransform = "rotate(" +(Math.floor(Math.random() * 360))+"deg)";
    paragraph.style.top = top+'%';
    paragraph.style.left = left+'%';
}

var test = function(event) {
    if (event.keyCode == 13 || event.which == 13){
    createp() }
}

</script>
</head>
<body id='field' onkeypress='test(event)' style='background-color:green;'>
</body>
</html>

What helped: actually positioning the p tags absolute by using a <style> tag. Also setting display to inline-block because that was what made the display bigger.
I also created an object to use and inserted that into the DOM using appendChild this also allows to just refer to it later instead of setting and getting it using and ID.

Hope this helps you out
JumpWar

[Melkor333]

thhx alot man! This is what I was searchin for! 🤝 🙂