onclick event
<button>Click me</button>
<p>이 문자열을 클릭해 보세요</p>
Q : The onclick event is used to trigger a function when an element is clicked on.
Click the button to trigger a function that will output "Hello World" in a p element with id="demo".
MY ANSWER
<button onclick="ClickMe()">Click me</button>
<p id="demo"></p>
<script>
var putsth = document.getElementById("demo");
function ClickMe(){
putsth.innerHTML = "Hello World";
}
</script>
*만약 <button id="demo" onclick="ClcikMe~>이렇게 했다면 박스 안 Click me 글자가 Hello World로 바꼈을 것ANSWER
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
Syntax
1. In HTML:
This example demonstrates how to assign an "onclick" event to a p element.
<element>
<p id="demo" onclick="MyFunction()">Click me</p>
//Click me라는 글씨를 클릭하면 You changed me로 바꾸게 하는 함수를 만들기 위해 함수명 MyFunction을 지정. 함수라는 것을 알려주기 위해 MyFunction() 괄호 잊지말기!
<script>
function MyFunction(){
document.getElementById("demo").innerHTML="You changed me";
}
</script>
2. In JavaScript:
This example uses the HTML DOM to assign an "onclick" event to a p element.
object.onclick = function(){myScript};
ANSWER(WRONG)
<p id ="demo">Click me</p>
<script>
document.getElementById("demo").onlick=
function(){ //함수명을 다시 지정해줘야함
document.getElementById("demo").innerHTML = "You change me"
};
</script>
ANSWER(CORRECT)
<p id ="demo">Click me</p>
<script>
document.getElementById("demo").onclick=
function() {myFunction()}; //myFunction이란 함수를 실행
1-1. function myFunction(){
document.getElementById("demo").innerHTML = "You changed me";
}
1-2. function myFunction(){
demo.innerHTML = "You changed me";
};
</script> //라고 해도 값 도출
2. const sth = document.getElementById("demo")
sth.onclik= function() {myFunction()};
function myFunction(){
sth.innerHTML = "You changed me";
}
3. In JavaScript, using the addEventListener() method:
This example uses the addEventListener() method to attach a "click" event to a p element.
object.addEventListener("click", myScript);
<p id = "demo">Click me</p>
<script>
document.getElementById("demo").addEventListener("click",myFunction);
function myFunction(){
document.getElementById("demo").innerHTML = "You changed me";
};
</script>
function myFunction(){
demo.innerHTML = "You changed me";
};
</script> //라고 해도 값 도출
<h1 id = "title">This works!</h1>
const title = document.querySelector("#title");
function changecolor(){
title.style.color = "red";
}
title.addEventListener("click",changecolor);
motivation⚡️