revision:
The oncanplay attribute defines a script to run when the browser can start playing the specified media (when it has buffered enough to begin).
The oncanplay attribute is part of the event attributes, and can be used on the following elements: <audio>, <embed>, <object>, <video>.
<audio oncanplay="script"></audio>
<embed oncanplay="script"></embed>
<object oncanplay="script"></object>
<video oncanplay="script"></video>
script: the script to be run on oncanplay.
example : audio
<audio style="margin-left:3vw;" id="myAudio" controls oncanplay="playAudio()">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
function playAudio() {
alert("Can start playing the audio");
}
</script>
example : video
<video style="margin-left:3vw;" id="myVideo" width="320" height="176"
controls oncanplay="playVideo()">
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function playVideo() {
alert("Can start playing video");
}
</script>
The oncanplaythrough event occurs when the browser estimates it can play through the specified audio/video without having to stop for buffering.
The oncanplaythrough attribute is part of the event attributes, and can be used on the following elements:<audio>, <video>.
<audio oncanplaythrough="script"></audio>
<video oncanplaythrough="script"></video>
script: the script to be run on oncanplaythrough.
example audio:
<audio style="margin-left:3vw;" id="myAudio" controls
oncanplaythrough="playAudio2()">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
function playAudio2() {
alert("Can play the audio without any buffering");
}
</script>
example video:
<video style="margin-left:3vw;" id="myVideo" width="320" height="176" controls
oncanplaythrough="playVideo2()">
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function playVideo2() {
alert("Can play the video without buffering");
}
</script>
The attribute fires the moment when the value of the element is changed.
The "onchange attribute" is part of the event attributes, and can be used on any HTML element.
This event is similar to the "oninput event". The difference is that the "oninput event" occurs immediately after the value of an element has changed, while "onchange" occurs when the element loses focus. The other difference is that the onchange event also works on <select> elements.
<element onchange="script"></element>
This attribute contains single value script which works when the onchange attribute is called.
Select a new car from the list.
When you select a new car, a function is triggered which outputs the value of the selected car.
codes:
<p class="select">Select a new car from the list.</p>
<select style="margin-left:3vw;" id="mySelect" onchange="myCar()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p class="spec">When you select a new car, a function is triggered which outputs the value
of the selected car.</p>
<p class="spec" id="demo"></p>
<script>
function myCar() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
Modify the text in the input field, then click outside the field to fire the onchange event.
Enter some text:
codes:
<p class="spec">Modify the text in the input field, then click outside the field to fire
the onchange event.</p>
<p class="spec">Enter some text: <input type="text" name="txt" value="Hello"
onchange="newText(this.value)"></p>
<script>
function newText(val) {
alert("The input value has changed. The new value is: " + val);
}
</script>
The fires when there is a mouse click on the element.
The onclick attribute is part of the event attributes and can be used on any HTML element.
<element onclick="script"></element>
script: the script to be run on onclick.
A function is triggered when the button is clicked. The function outputs some text in a p element.
codes:
<button style="margin-left:3vw;" onclick="clickMe()">Click me</button>
<p style="margin-left:3vw;" id="click1"></p>
<p style="margin-left:3vw;">A function is triggered when the button is clicked.
The function outputs some text in a p element.</p>
<script>
function clickMe() {
document.getElementById("click1").innerHTML = "Hello World";
}
</script>
Click me to change my text color.
A function is triggered when the p element is clicked. The function sets the color of the p element to red.
codes:
<p class="spec" style="margin-left:3vw;" id="click2" onclick="changeMe()">
Click me to change my text color.</p>
<p class="spec" style="margin-left:3vw;">A function is triggered when the
p element is clicked. The function sets the color of the p element to red.</p>
<script>
function changeMe() {
document.getElementById("click2").style.color = "red";
}
</script>
This attribute specifies through the user right-clicks on an element to open the context menu.It supports all HTML elements.
<element oncontextmenu="script></element>
script: the script to be run on oncontextmenu.
codes:
<div style="margin-left:5vw;" id="menu" oncontextmenu="clickRight()" contextmenu="mymenu">
<p class="spec">Right-click inside this box</p>
</div>
<script>
function clickRight() {
alert("You right-clicked inside the div!");
}
</script>
Now right click on above red box to open context menu.
codes:
<div style="margin-left:3vw;color:white;" oncontextmenu="get()" id="box">Hi there !!</div>
<p class="spec">Now try to right click on above red box to open context menu.</p>
<script>
function get() {
document.getElementById("box").style.background = "#084C61";
document.getElementById("box").style.color = "darkblue";
alert("you right-clicked the box");
}
</script>
The oncopy attribute fires when the user copies the content of an element. The attribute also fires when the user copies an element - for example an image - created with the <img> element.
Supported HTML tags: all HTML elements.
Tip: the oncopy attribute is mostly used on <input> elements with type="text".
There are three ways to copy an element/the content of an element: 1/ press CTRL + C; 2/ select "Copy" from the edit menu in the browser; 3/ right click to display the context menu and select the "Copy" command.
<element oncopy="script">
script: the script to be run on oncopy
codes:
<input style="margin-left:3vw;" type="text" oncopy="myCopy()" value="Try to copy this text">
<p class="spec" id="demo"></p>
<script>
function myCopy() {
document.getElementById("demo").innerHTML = "You copied the text!"
}
</script>
codes:
<input style="margin-left:3vw;" type="text" oncopy="myCop()" value="GeeksForGeeks">
<p class="spec" id="sudo"></p>
<script>
function myCop() {
document.getElementById("sudo").innerHTML = "Copied box content"
}
</script>
This attribute defines a script to run when the cue changes in a <track> element.
The oncuechange attribute is part of the event attributes and can be used on the following element: <track>.
<track oncuechange="script"></track>
codes:
codes:
The attribute fires when the user cuts the content of an element.
The oncut attribute is part of the event attributes and can be used on any HTML element. Although the oncut attribute is supported by all HTML elements, it is not actually possible to cut the content of - for example - a <p> element, UNLESS the element has set the "contenteditable attribute" to "true".
There are three ways to cut the content of an element:1/ press CTRL + X; 2/ select "Cut" from the edit menu in your browser; 3/ right click to display the context menu and select the "Cut" command.
<element oncut="script">
script: the script to be run on oncut.
codes:
<input style="margin-left:3vw;" type="text" oncut="cutIt()" value="Try to cut this text">
<p class="spec" id="demo"></p>
<script>
function cutIt() {
document.getElementById("demo").innerHTML = "You cut text!";
}
</script>
Try to cut this text
codes:
<p class="spec" contenteditable="true" oncut="cutText()">Try to cut this text</p>
<script>
function cutText() {
alert("You cut text!");
}
</script>