추천 버튼을 누르면 화면에 표시 되게
본문
추천 버튼을 누르면 추천버튼 아래 쪽에 추천을 했습니다 라는 메세지가 표시되게 할 수 있을까요?
view 파일에서 어떻게 추가를 해야 할까요?
답변 2
구체적으로 소스코드가 어떻게 되어 있는지는 알수 없지만
예를 들어 다음과 같이 해 볼 수 있을것 같습니다.
예제를 참고하셔서 원하시는 로직으로 구현 하시면 되지 않을까 합니다.
<button id="recommendButton">추천</button>
<div id="recommendationMessage"></div>
<script src="recommendation.js"></script>
document.addEventListener("DOMContentLoaded", function() {
var recommendButton = document.getElementById("recommendButton");
var recommendationMessage = document.getElementById("recommendationMessage");
recommendButton.addEventListener("click", function() {
recommendationMessage.textContent = "추천을 했습니다.";
});
});
<?php if ($board['bo_use_nogood']) { // 비추천 ?>
<button type="button" onclick="na_good('<?php echo $bo_table ?>', '<?php echo $wr_id ?>', 'nogood', 'wr_nogood');" class="btn btn-basic" title="비추천">
<i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
<b id="추천완료">추천하기</b>
<span class="sr-only">비추천</span>
</button>
<?php } ?>
추천 버튼은 이렇게 되어 있습니다~
다음을 참고하셔서 view 파일에 적용하시면 되지 않을까 생각합니다.
<?php if ($board['bo_use_nogood']) { // 비추천 ?>
<button type="button" onclick="na_good('<?php echo $bo_table ?>', '<?php echo $wr_id ?>', 'nogood', 'wr_nogood');" class="btn btn-basic" title="비추천">
<i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
<b id="추천완료">추천하기</b>
<span class="sr-only">비추천</span>
</button>
<script>
// JavaScript 코드 추가
function na_good(bo_table, wr_id, type, target) {
// 추천이 완료되면 메시지를 표시하는 함수
var recommendationMessage = document.createElement("div");
recommendationMessage.textContent = "추천을 했습니다.";
document.getElementById(target).appendChild(recommendationMessage);
// 여기에 na_good 함수의 나머지 로직을 추가할 수 있습니다.
// na_good 함수는 이미 정의되어 있다고 가정합니다.
}
</script>
<?php } ?>
스크립트 추가를 해서 요래 저래 해봤는데, 버튼 작동이 안되네요...
혹시 다른 부분이 있을까요?
안된다고 하시는게 어떻게 안된다고 하시는건지요?
f12 개발자모드에서 오류나는 부분들을 체크해 보세요
그냥 붙여넣기 하시면 안되겠죠...! 원본의 내용과 비교해서 로직을 구현 하셔야 합니다
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at na_good (board.php?bo_table=guu&wr_id=180:529:40)
at HTMLButtonElement.onclick (board.php?bo_table=guu&wr_id=180:518:113)
이 에러가 뜨는데 읽어 오지 못한다는 건가요?
JavaScript 코드에서 document.getElementById(target)를 사용하여 해당 요소를 찾을 수 없기 때문에 발생하는 오류 인것 같습니다.
다음과 같이 수정해 보세요
function na_good(bo_table, wr_id, type, target) {
// 해당 요소를 찾습니다.
var targetElement = document.getElementById(target);
// 요소가 존재하는지 확인합니다.
if (targetElement) {
// 추천이 완료되면 메시지를 표시하는 함수
var recommendationMessage = document.createElement("div");
recommendationMessage.textContent = "추천을 했습니다.";
targetElement.appendChild(recommendationMessage);
} else {
console.error("Element with ID '" + target + "' not found.");
}
// 여기에 na_good 함수의 나머지 로직을 추가할 수 있습니다.
// na_good 함수는 이미 정의되어 있다고 가정합니다.
}
CSS ::after 선택자와 position 속성에 관해서 공부해보세요.
(SIR 소스를 F12키 개발자모드로 확인하시면 소스 확인 가능)