admin管理员组

文章数量:1356828

I'm a newbie in HTML, CSS, and Javascript. I'm trying to make a little circle that move right 10px every time it is clicked. I try by writing this short code :

function moveit() {
  document.getElementById("circle").style.cx += "10px";
};
<svg width="500px">
  <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()" />
</svg>

I'm a newbie in HTML, CSS, and Javascript. I'm trying to make a little circle that move right 10px every time it is clicked. I try by writing this short code :

function moveit() {
  document.getElementById("circle").style.cx += "10px";
};
<svg width="500px">
  <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()" />
</svg>

By writing the code above, I'm trying to add 10px to the cx every time the circle is clicked. But it seems fail to add 10px to the cx. I need to know how to do that in the right way. Thank you!

  • javascript
  • css
  • html
  • svg
Share Improve this question edited Aug 5, 2015 at 8:47 Jamie Barker 8,2563 gold badges31 silver badges64 bronze badges asked Aug 5, 2015 at 8:43 WillyWilly 231 silver badge6 bronze badges 1
  • I know you've accepted my answer, but I've edited it with some potentially more helpful code. – Jamie Barker Commented Aug 5, 2015 at 9:55
Add a ment  | 

6 Answers 6

Reset to default 2

First, cx is an attribute of the HTML element. As such, use getAttribute() and setAttribute() to retrieve and assign attribute values accordingly. In your case, to retrieve the value:

var cx = document.getElementById("circle").getAttribute("cx");

Also, I have added some Regex which strips non-numerical characters from the cx attribute and converts it to an int before incrementing it by 10:

cx = parseInt(cx.replace(/\D/g,'')) + 10;

And finally, assign the new attribute value to the element:

document.getElementById("circle").setAttribute("cx", cx);

Putting it all together:

<script>
    function moveit() {
        var circle = document.getElementById("circle");
        var cx = circle.getAttribute("cx");
        cx = parseInt(cx.replace(/\D/g,'')) + 10;
        circle.setAttribute("cx", cx);
    };
</script>
<body>
    <svg width="500px">
        <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()"/>
    </svg>
</body>

Working JS Fiddle

You can use the SVG DOM to do this, that way you can avoid all the get/set attribute stuff and use += as you wanted to. All the plication about removing units and converting to/from strings is also avoided.

function moveit() {
  document.getElementById("circle").cx.baseVal.value += 10;
};
<svg width="500px">
  <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()" />
</svg>

You're editing an attribute, not a CSS style.

You want to use getAttribute to get the current value, and then set it again with setAttribute.

function moveit() {
  var objCircle = document.getElementById("circle");
  var intCX = parseInt(objCircle.getAttribute('cx'));
  objCircle.setAttribute('cx', intCX + 10 + 'px');
};
<svg width="500px">
  <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit(this)" />
</svg>

Edit

If you're running this function against multiple elements, then it is perhaps best done by assigning a class to your moveable elements and then using a listener. Also Robert Longson's idea to use the SVG DOM is far superior to using setAttribute so I've included that too.

function MoveRight(objSVG, intVal) {
  objSVG.cx.baseVal.value += intVal;
};

var objMovers = document.querySelectorAll('.moveme'); // Get a list of the nodes with the moveme class
Array.prototype.forEach.call(objMovers, function(element, index) { // Loop through each of these element nodes
  element.addEventListener('click', function() { // Apply a click listener
    MoveRight(this, 10); // Run the MoveRight function and push this element and the amount through.
  });
});
<svg width="500px">
  <circle class="moveme" id="circle" cx="10px" cy="10px" r="5px" />
</svg>

Something like this?

function moveit() {
    var cx = document.getElementById("circle").getAttribute("cx");
    cx = cx.replace('px', ''); // remove px
    cx = parseInt(cx); // convert to int
    cx += 10; // add 10
    cx = cx.toString() + 'px'; // append px
    document.getElementById("circle").setAttribute("cx", cx);
};

Demo here.

You want setAttribute, eg:

x = 10;
moveit = function() {
    x = x + 10
    document.getElementById("circle").setAttribute("cx", x);
};

http://jsfiddle/ejtef6fx/

Example with getAttribute:

moveit = function() {
    var svg = document.getElementById("circle")
    var x = parseInt(svg.getAttribute("cx"))
    x = x + 10
    svg.setAttribute("cx", x)
};

http://jsfiddle/ejtef6fx/1/

Use parseInt or parseFloat to ensure the value returned is a number before you add 10 onto it.

cx is an attribute not a CSS property. here is how to increment it on click:

function moveit() {
    //get current cx value
  var cx = document.getElementById("circle").getAttribute('cx');

    //remove the 'px' part
  var cxVal = Number(cx.substring(0, cx.length - 2));

    //increment cx value by 10
    cxVal+=10;

    //set value again
  document.getElementById("circle").setAttribute('cx', cxVal+'px');
};

a working fiddle : https://jsfiddle/qmchLqtq/

本文标签： cssHow to move this circle using javascriptStack Overflow

版权声明：本文标题：css - How to move this circle using javascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743974085a2570806.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。