+ 1

Why this code isn't work ?

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

2nd Jun 2021, 8:33 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
12 odpowiedzi
+ 5
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); });
2nd Jun 2021, 9:17 AM
Josh Greig
Josh Greig - avatar
+ 5
Nice code
4th Jun 2021, 6:12 AM
Tharul Nejana
Tharul Nejana - avatar
+ 1
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.
2nd Jun 2021, 11:36 AM
Josh Greig
Josh Greig - avatar
+ 1
Simple In JS Erase Line No. 38 Then The Code Works
3rd Jun 2021, 1:34 PM
Dhananjay Chavhan
0
Josh Greig Is there any way to do this simply in css animation , send that .
2nd Jun 2021, 9:40 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
0
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;} }
2nd Jun 2021, 11:42 AM
Josh Greig
Josh Greig - avatar
0
Josh Greig How to make that for y axis for attributeName .(javascript )
2nd Jun 2021, 11:46 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
0
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?
2nd Jun 2021, 4:11 PM
Josh Greig
Josh Greig - avatar
0
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.
3rd Jun 2021, 3:28 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
0
you should also change the height of your svg element (to be more than 20px), and set 'from' and 'to' arguments accordingly ;)
3rd Jun 2021, 3:32 AM
visph
visph - avatar
0
visph It works. Thank you.
3rd Jun 2021, 3:36 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
0
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?
3rd Jun 2021, 1:38 PM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar