alert 메세지 창에 함수 실행하기

어려운 고비를 지나고 있다. 

 

명대사를 랜덤으로 출력하는 코드는 어찌저찌 찾아서 만들어냈으나 

그 함수를 alert 창에 띄우려니 무엇을 어떻게 건드려야 할지 모르겠어서 구글링을 뒤지게 하고 있다. 

 

우선 그냥 객체의 key와 value를 띄울 수 있는 코드를 찾아냈다. 

 

let resultString = ""
for (const [key, value] of Object.entries({hello: "🌎", wassup: "👀✨😍🔥"}))
{
  resultString += `${key}: ${value}\n`
}
alert(resultString)

 

근데 이건 그냥 의미가 없다. 난 이미 객체를 활용하는 함수 코드를 짰고, 그걸 활용할 수 있는 코드가 필요하기 때문에

 

그래서 다시 검색한 키워드가 

"call javascript function in alert" 이다. 

 

그리고 찾아낸 코드는 

 

<script>
         function myFunction(warning) {
            alert(warning);
            catchedAlert();
         }
         function catchedAlert() {
            alert('Alert called!');
         }
      </script>
      <button onclick="myFunction('This is an alert box!')">Click me!</button>

이 코드를 실제로 실행하면 다음과 같이 작동한다. 

 

버튼이 생기고, 한 번 누르면 "This is an alert box!" 라는 문구가

두 번 누르면 "Alert called!" 라는 문구가 실행된다. 

 

이걸 활용해서 내가 만든 함수를 저 alert창에 넣고 말겠다. 

 

 

 

계속 헤매다가 굉장히 쉽게 해결했다. 

 

<script>
    function catchedAlert(){
      alert(randomProperty(lines));
    }
    </script>

    <button onclick = "catchedAlert()"> 눌러보세요 </button>

 

엄청 짧은 코드... 바보같다 이 짧은걸 못생각해내다니

그래도 이것도 내가 계속 고쳐보다가 얻은 결과니까

 

일단 함수를 그냥 하나 만들고, 그 함수 안에 alert 창이 뜨게 한다음 그 내용을 이미 만들어둔 randomProperty의 return 값이 될 수 있도록 만들어줬다. 

 

그리고 onclick event로 catchedAlert() 함수를 넣어주니 바로 실행된다. 

 

 

근데 문제가아아아...

 

분명 document.write으로 객체안에 있는 value 값들을 찍어냈을때는 <br>태그가 작동했는데 여기서는 작동하지 않는다...

 

<br> 뭐냐고 미쳤냐고 거슬려 죽겠다고

 

이게 javascript에서만 쓰이는 건가..../???/? 그럴리가 없는데

이 문제를 좀 해결해봐야겠다. 

 

 

그리고 또 개선 사항이

alert창까지 css 디자인을 적용하고 싶다. 다른 거는 다 윈도우 98 디자인인데 이것만 그냥 뜨면 좀 통일감이 떨어져보인다. 

일단 이것만 완성하면 명대사까지 구현하게 된다

 

 

+) <br> 문제는 아주 간단하게 해결했다. 

<br>대신 역슬래쉬n 으로 대체했다

 

티스토리에서는 역슬래쉬가 안먹길래 그냥 기록용으로 캡쳐해서 올린다