I am new to HTML and javascript. I have written below code to execute over() of javascript when the mouse hovers over a button but the code is not working.
Kindly suggest some changes in the code to get the it running.
<html>
<head>
<script type="text/javascript">
function over()
{
document.getElementById("b1").value="You have hovered mouse over me";
}
</script>
</head>
<body>
<button onmouseover="over()" id="b1">Hover mouse over me</button>
</body>
You need to replace text with innerHTML
like this
<html>
<head>
<script type="text/javascript">
function over()
{
document.getElementById("b1").innerHTML="You have hovered mouse over me";
}
</script>
</head>
<body>
<button onmouseover="over()" id="b1">Hover mouse over me</button>
</body>
You should change the innerHTML of button element
document.getElementById("b1").innerHTML = "You have hovered mouse over me";
Your script works on <input type="button">
Your code does work.
The thing is, you will not see value change anywhere in the DOM. for that you should use <input type='submit' value='Hover mouse over me'/> instead, or change innerHTML of your <button> if you want to use a <button>.
.innerHTML on <button>
function over()
{
document.getElementById("b1").innerHTML = "You have hovered mouse over me";
}
<button id="b1" onmouseenter="over()">Hower me</button>
value on <input type="submit">
function over()
{
document.getElementById("b1").value = "You have hovered mouse over me";
}
<input id="b1" type="submit" onmouseenter="over()" value="Hower me">
Related
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
I have a text-field whose value will be set on the click of a button. I want to detect when the value of the input field will change. I can't figure out the specific event to fire.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myFunction() {
$('#mytxtBox').val("2018/12/18");
}
$(document).on('input', '#mytxtBox', function() {
alert("Eureka!!!")
});
</script>
</head>
<body>
<input id='mytxtBox' type="text">
<button onclick="myFunction()">Press it</button>
</body>
</html>
Use trigger method to trigger the input event.
$('#mytxtBox').val("2018/12/18").trigger("input");
You need the change event. first you subscribe the input to the event listener, and add your logic that you want to fire when the event is called. Then you trigger the event after an update. Something like...
$(function(){//bind the event listener
$('#mytxtBox').on('change', function(){
//do stuff here
});
})
function myFunction() {
$('#mytxtBox').val("2018/12/18");
$('#mytxtBox').trigger('change');//trigger the event
}
Just assign the change a .change() and it will trigger the onChange event
$('#updateValue').on('click', function () {
$('#mytxtBox').val("2018/12/18").change();
});
$('#mytxtBox').on('change', function() {
console.log('abc');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='mytxtBox' type="text">
<button id="updateValue"> Press it </button>
Try this..
the alert will pop before the value appear
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myFunction() {
$('#mytxtBox').val("2018/12/18").trigger("eureka");
}
$(function(){
$('#mytxtBox').on("eureka", function() {
alert("Eureka!!!")
});
});
</script>
</head>
<body>
<input id='mytxtBox' type="text">
<button onclick="myFunction()">Press it</button>
</body>
</html>
We can try using passing function as a callback to val() method.
Reference: http://api.jquery.com/val/#val-function
function myFunction() {
$('#mytxtBox').val(function(i ,value){
alert('hello i am going to change');
return "2018/12/18";
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='mytxtBox' type="text">
<button onclick="myFunction()">Press it</button>
There are multiple events for textbox such as keypress, change, keydown, keyup etc. You can select any as suitable for your goal.
Below example use keypress event:
function fnChangedText() {
alert("Eureka!!!");
}
function myFunction() {
$('#mytxtBox').val("2018/12/18");
$('#mytxtBox').keypress();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='mytxtBox' type="text" onkeypress="fnChangedText()">
<button onclick="myFunction()"> Press it </button>
I am looking for the JavaScript code that can assist me in getting something similar to the button onclick event. Please take a look at the code below.
Javascript code
<script type='text/javascript'>
function myPopup() {
var overlay = $('<div id="overlay"></div>');
$('.x').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
var obj = document.getElementsByClassName('clickLink');
// alert("name");
myScript = function() {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
};
obj[0].addEventListener("click", myScript);
}
</script>
HTML Code
<div class='popup'>
popup content here
</div>
<div id='container'>
<button class='clickLink'>
Click Here to See Popup!
</button>
<!-- this is working 5ne i called class in javascript -->
<button type="submit" onclick='myPopup();'>
Click Here to See Popup!
</button>
<!-- but developers need like onclick event -->
</div>
</body>
This popup script is working fine but I need an onclick event like button onClick='myfunction()'
please any one help me Thanks
If I understand correctly you want to know how onclick event works in JavaScript, if that is the case as your question is not entirely clear, try something to the effect of the following:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
newbie to java script , I want to do like when any one click on first Button,then second button is disabled for 30 seconds , after the enabled of second button, click on second button and third button visible to the user. I know simple disable enable buttons on tutorials Thanks.
<!DOCTYPE html>
<html>
<body>
<input type="button" id="myBtn" value="My Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
}
</script>
</body>
</html>
Use setTimeout function to do it.
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 5000);
}
</script>
Hope it works.
Use setTimeout() function and variables to flag click status:
setTimeout("myFunction();", 30000);
see this plunker http://embed.plnkr.co/ZUmGoGEr2TYHlfPhUJgK/preview
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" id="myBtn" value="My Button" onclick="document.getElementById('thirdBtn').style.display='block'">
<input type="button" style="display:none;" id="thirdBtn" value="Third Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById('thirdBtn').style.display='none';
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 30000);
}
</script>
</body>
</html>
I have a simple html page
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
}
</script>
</body>
I want to change the button title on click.
The title might include HTML tags and I want it to be presented as is (without formatting).
I've tried the way suggested in this post and it works great for a regular text. Unfortunately it formats the HTML tags and doesn't present the non-formatted text:
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
button.innerHTML = "<strong>my text</strong>"
}
</script>
</body>
To be clear, I want the title to be <strong>my text</strong> and not my text.
So what is the right way to present a non-formatted text inside the button?
The innerText attribute will do the work:
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
button.innerText = "<strong>my text</strong>"
}
</script>
</body>
Note: Firefox doesn't support innerText, but has its own property called textContent, which can be used instead.