data-perent 값 바꾸는 방법 알고 싶습니다
HTML:
<div id="chart" class="chart-circle" data-percent="100"></div>JavaScript:
var value = 50; $("#chart").attr("data-percent", value.toString());위 코드 사용해봤는데 안되네요
data-percent 값 바꾸는 방법 알려주시면 감사하겠습니다
테스트해보았는데 제 경우 잘 되더군요.
$("#chart").attr("data-percent")
를 했을 때 입력했던 값이 잘 떨어지더군요.
혹시 id가 chart인 것이 더 있는건 아니겠죠?
( 여러개 존재한다면, 어떤 element가 리턴될지 알 수 없습니다. 흔히 하는 실수입니다. )
안녕하세요
Javascript 를 chart 가 그려지고 난 후 실행 하도록 로직을 구성해 보세요 ^^
가령 )
1)
<!DOCTYPE html>
<html lang="en">
<head>
<title>data-percent</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head><body>
<div class="container"><div id="chart" data-percent="100"></div></div>
<script>
var value = 50;
$("#chart").attr("data-percent", value.toString());
</script>
</body>
</html>
2) $(document).ready 사용시.
<!DOCTYPE html>
<html lang="en">
<head>
<title>data-percent</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var value = 50;
$("#chart").attr("data-percent", value.toString());
});
</script>
</head>
<body>
<div class="container"><div id="chart" data-percent="100"></div>
</div>
</body></html>
감사합니다.
위 사용하신 코드와 동일하게 적용하셨다면 안될 이유가 딱히 없습니다.
예상되는 이유는 아래와 같으니 확인 해보시면 좋을것같습니다.
1. chart 라는 ID 를 가진 dom 이 여러개 있다
2. value 라는 변수가 기존 이미 생성되어있다
3. jQuery Load 가 안되어있다.
4. JS 가 값을 바꾼 이후 다시 어떠한 부분에서 data-percent 를 건드린다.
다만 위 경우 대부분이 실제 콘솔에서는 에러가 찍힐것입니다.
콘솔 로그 먼저 확인해보시길 추천드립니다.
다른 dom 이나 JS 를 다 제거하고 위 코드만 직접 html 파일 만들어서 사용해보시면 잘 된다는걸 아실수있으실겁니다.
전체 코드를 첨부하여 주시거나, 직접 디버그 찍으면서 확인하시는것 말고는 해당 코드상으로는 문제가 없어보입니다.
