Why this code isn't work ?

Question

I want to create rectangle animation when I click the button. But it is not work. If you have easy method to do that share in commment.

This is my code ↓

https://code.sololearn.com/WbEcyG5mCMBy/?ref=app

Answer 1

There are a lot of problems.

Remove your onclick="fun()" from HTML and try this js:

document.addEventListener('DOMContentLoaded', function() {
var a = document.getElementById('a');

function fun()
{
const svgNS = "http://www.w3.org/2000/svg";
var svg=document.createElementNS(svgNS, "svg");
var rect=document.createElementNS(svgNS, "rect");
var l=document.createElementNS(svgNS, "animate");
svg.setAttribute('width', "330");
svg.setAttribute('height', "20");
rect.setAttribute('width', 10);
rect.setAttribute('height', 10);
rect.setAttribute('fill', "green");
l.setAttribute('attributeName', "x");
l.setAttribute('from', 50);
l.setAttribute('to', 330);
l.setAttribute('dur', "3s");
l.setAttribute('fill', "freeze");
rect.appendChild(l);
svg.appendChild(rect);
document.body.appendChild(svg);
}

a.addEventListener('click', fun);
});

Answer 2

Nice code

Answer 3

Yes, you could animate a little square moving in a similar way without any SVG and just animating the movement of a coloured HTML div.

It is anywhere from weird to quite tricky and less understandable to activate the animation when a button is clicked without a little JavaScript, though.

Answer 4

Simple In JS Erase Line No. 38 Then The Code Works

Answer 5

Josh Greig
Is there any way to do this simply in css animation , send that .

Answer 6

Here is a pure CSS version but it'll run the animation immediately without clicking the button.

Add this to the body element in your HTML:
<div id="animated-square"></div>

Add this to your CSS:
#animated-square {
position: relative;
left: 0;
top: 0;
width: 10px;
height: 10px;
background-color: green;
animation-name: example;
animation-duration: 3s;
}

@keyframes example {
from {left: 50px;}
to {left: 330px;}
}

Answer 7

Josh Greig
How to make that for y axis for attributeName .(javascript )

Answer 8

Mohan wrote, "Josh Greig
How to make that for y axis for attributeName .(javascript )"

Response:

I'm not sure what you mean. You want a box moving up and down instead of horizontally? Do you want the JavaScript and SVG used or a mix of JavaScript and CSS?

Answer 9

Josh Greig
I want to move the box up and down. I changed your code ('attributeName','x'); to ('attributeName','y'); . But it is not works.

Answer 10

you should also change the height of your svg element (to be more than 20px), and set 'from' and 'to' arguments accordingly ;)

Answer 11

visph
It works. Thank you.

Answer 12

Payal Gajanan Chavhan
Now I want to make row of boxes run vertically inside the div . But clicking the button for 15+ times ,after the new boxes are run below the first row . How to correct it?