Question 366353 in Html Question posted in
Some basic documentation can be found here.

Html – How to get a JavaScript script to stay within its designated element?

Pretty much what it says on the tin.

I have a JS script that isn’t staying within the div element it is designated to on my page, it "sits" in the footer section instead.
Page design with the JS script result "sitting" in the footer

<header>

    <div>icon</div>
    <div>header</div>
    <div style="padding:5px;">
    script is supposed to go here
        <script src="JS/SpinningBaton.js"></script>
    </div>
  
</header>

That’s how I currently have the HTML block written in an attempt to resolve the issue. Unfortunately, nothing has changed. What am I doing to wrong?

For context, the div element is 165px in size while the JS script is 155px, so it should fit without overflow.

I have tried putting the script within different elements within the div and resizing the div element. But the script defiantly stays in the footer area regardless of what I have tried so far.

SpinningBaton code, as requested – I’d include the code that makes the script actually work, but it exceeds the limit:

angleMode = "radians";

var angle = 0;
var aVelocity = 0;
var aAcceleration = 0.0001;
// var TargetSpeed = ((Math.random() * 2)-1)/2;

function RandNum(){
    a = Math.floor(Math.random() * 256);
    return a;
}

Num1 = RandNum();
Num2 = RandNum();
Num3 = RandNum();
Num4 = RandNum();
Num5 = RandNum();
Num6 = RandNum();
Num7 = RandNum();
Num8 = RandNum();
Num9 = RandNum();
Num10 = RandNum();
Num11 = RandNum();
Num12 = RandNum();

draw = function() {
    createCanvas(155,155);
    
    resetMatrix();
    translate(width/2, height/2);
    rotate(angle);
    
    stroke(0, 0, 0,0);
    fill(Num1, Num2, Num3);
    
    ellipse(60, 0, 32, 32);
    fill(Num4, Num5, Num6);
    ellipse(-60, 0, 32, 32);
    fill(Num7, Num8, Num9);
    ellipse(0, 60, 32, 32);
    fill(Num10, Num11, Num12);
    ellipse(-0, -60, 32, 32);
    
    if (aVelocity < TargetSpeed)
    {
        aVelocity += aAcceleration;
    }
    else
    {
        aVelocity -= aAcceleration;
    }
    angle += aVelocity;
};
Tags:

2

Answers


  1. 0

    I dont think so javascript works like that sir, a javascript script doesn’t work when you place it in some kind of object (div in this case) instead it is always supposed to be put at the end of the HTML page (before the body ending tag usually) and it works accordingly what you have written inside it.

    Here you are considering javascript as a html object (just live divs ,paragraphs ,header tags etc.) but it isn’t like that.

    I can help you more if you can provide your Javascript code and tell me what you are trying to code more clearly 😄.

    I don’t know why so many of you are giving me downvotes, I have clearly answered his question, he is a beginner, please stop this toxic behaviour. Instead of giving me downvotes, why don’t you answer his question itself.

    Login or Signup to reply.
  2. 0
    1. grab that div element using the the id or class
    2. then in js file render the result in that element

    refer:- https://www.geeksforgeeks.org/dom-document-object-model/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search