How do i change the text on a button on mouse hover? - javascript

I need to make a button that changes the text inside it when the cursor is over it, and changes it back when the cursor leaves the box.
I have tried on VScode with "document.getElementById().innerHTML" but it just changes the text when the cursor goes on and it doesnt go back to the original text.
button {
background-color: green;
border-color: white;
border-radius: 10px;
align-self: center;
}
body {
background-color: black;
}
h1 {
color:green;
text-align: center;
}
p {
color: chartreuse;
font-family: Verdana;
font-size: 12px;
}
button:hover{
background: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="website.css">
</head>
<body>
<h1>Web Page</h1>
<!-- Buttons -->
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click to display Date and Time</button>
<p id="demo"></p>
<button type="button"
onmouseover="this.innerHTML = Date()"
onmouseout="document.getElementById">What time is it</button>
<script>
var x = "What time is it";
document.getElementById("time").innerHTML = x;
</script>

You can use mouseenter and mouseleave event and then can change innerHTML of the button.
const btnEle = document.getElementById("btn");
btnEle.addEventListener('mouseenter', e => {
btnEle.innerHTML = "Save";
});
btnEle.addEventListener('mouseleave', e => {
btnEle.innerHTML = "Submit";
});
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div>
<button id="btn">Submit</button>
</div>
</body>
</html>

How I would do it is to have two <span>'s in my button. The first <span> will contain the text you want to show by default. The second <span> will contain the text you want to show on hover. This span is hidden by default.
Then, you could add an event listener to your button. On mouseover, hide the default text and show the span containing the hover text. In a mouseleave event listener, just do the opposite.
HTML:
<button id="myid">
<span class="default-text">Text 1</span>
<span class="hover-text" style="display: none;">Text 2</span>
</button>
JS:
var button = document.getElementById('myid')
button.addEventListener('mouseover', function() {
this.querySelector('.hover-text').style.display="block";
this.querySelector('.default-text').style.display="none";
});
button.addEventListener('mouseleave', function() {
this.querySelector('.default-text').style.display="block";
this.querySelector('.hover-text').style.display="none";
});

Related

Why is my button taking two clicks to toggle a function? JavaScript

I have created a webpage with a button. When you click it, it turns from the default black to pink and when you click it again, it turns purple. For some reason, it is taking two clicks to turn from the default black button to pink. Please help me figure out how to make it so it changes on the first click (or if you know a better way to carry this out)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Lab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="changeh1"> Clicking the button will change its color <h1>
<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
<script src="script.js"></script>
</body>
</html>
JavaScript
function changeStyle() {
//sets variable "button" to connect to HTML ID "buttonStyle"
var button = document.getElementById("buttonStyle"),
click = false;
button.onclick = function() {
click = !click;
//toggles background color back and forth between pink and purple when you click button
button.style.background = click? "#ff0066": "#9933ff";
//toggles text back and forth between "I am now pink!" and "I am now purple!"
document.getElementById('buttonStyle').innerHTML = click? 'I am now pink!': 'I am now purple!';
}
}
let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);
CSS
body{
text-align: center;
font-family: Helvetica;
}
button {
width:350px;
height: 125px;
background-color: black;
color:white;
border: 5px solid black;
font-size: 20px;
}
In your javascript, you wrote the below codelines.
let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);
Also in your html you wrote the code like the below.
<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
Meaning, when you click the My color will change! button, the changeStyle function will be called twice.
Why?
One from the event defined in html code and the other one from the event defined in javascript code.
In case you remove the above 2 codelines in javascript it will work correctly.
Or else, you can remove the onclick event in the html code like this :
<button type="button" name="button" id="buttonStyle">My color will change!</button>
You added eventListener two times, one in HTML onclick, the other one in Javascript with addEventListener.
You can make Javascript code as simple as follows:
var click = false;
let buttonClick = document.getElementById('buttonStyle');
function changeStyle() {
click = !click;
//toggles background color back and forth between pink and purple when you click button
buttonClick.style.background = click? "#ff0066": "#9933ff";
//toggles text back and forth between "I am now pink!" and "I am now purple!"
buttonClick.innerHTML = click? 'I am now pink!': 'I am now purple!';
}
body{
text-align: center;
font-family: Helvetica;
}
button {
width:350px;
height: 125px;
background-color: black;
color:white;
border: 5px solid black;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Lab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="changeh1"> Clicking the button will change its color <h1>
<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
<script src="script.js"></script>
</body>
</html>

Can you hide a div based on a buttons state being "false" when clicked with JS?

Basically I have a button, and when the button has been minimised and the person has finished the chat and the changes the attribute state of the button changes to <button aria-expanded="false"> , I need the whole chat div <div id="beacon-container"> to become hidden on the page.
Is this possible to target this specific attribute if I'm unable to edit the chat button and div code itself as it's an off-page call in?
Many thanks
Am not sure how you have implemented this already so I have just provided you with a solution that is quite open
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Credit: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

DOM Nodes Adding, Deleting, Alerts

So a little lost here, I'm not sure how to approach this, I've done the HTML and CSS but not sure how to do it in JS.
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Task 1 </title>
<meta charset="utf-8">
<script src="DomNodes.js"></script>
<style>
#output {
border: blue 5px solid;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
width: 50%;
}
#output p {
padding:10px;
border: black 1px dashed;
}
</style>
</head>
<body>
<h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
<p> Type in text below, click add to add as paragraph. <button id="add"> ADD </button> </p>
<textarea id ="input" rows="10" cols="60">
</textarea><br>
<button id="delete">Delete Last Paragraph</button>
<br><br>
<h2> Added Paragraphs </h2>
<div id="output">
</div>
</body>
</html>
This is the code with little explain
<!doctype html>
<html lang="en">
<head>
<title> Task 1 </title>
<meta charset="utf-8">
<!--<script src="DomNodes.js"></script>-->
<script>
function myFunction() {
//get input user
var userInput=document.getElementById("input").value;
//clean text area
document.getElementById("input").value="";
//create paragraph
var para = document.createElement("p");
//assign value ->user input
var node = document.createTextNode(userInput);
//assign text at paragraph
para.appendChild(node);
//assign paragraph at div tag
var element = document.getElementById("output");
element.appendChild(para);
}
function remove_LastChild() {
//get div output
var select = document.getElementById('output');
//control if there are child into output div
if (select.childElementCount>0){
//select last paragraph and remove it
select.removeChild(select.lastChild);
}
else{
alert("Tehere are not paragraph!");
}
}
</script>
<style>
#output {
border: blue 5px solid;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
width: 50%;
}
#output p {
padding:10px;
border: black 1px dashed;
}
</style>
</head>
<body>
<h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
<p> Type in text below, click add to add as paragraph. <button id="add" onclick="myFunction()"> ADD </button> </p>
<textarea id ="input" rows="10" cols="60">
</textarea><br>
<button id="delete" onclick="remove_LastChild()">Delete Last Paragraph</button>
<br><br>
<h2> Added Paragraphs </h2>
<div id="output">
</div>
</body>
</html>
I hope this hel you

How to add a class name to a specific elements

how i can create a javascript code to add class name to specific divs only
for Exapmle : i want to add a class_name to from div5 to the end of all divs ?
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
</script>
</body>
</html>
If you're looking to add a class name from one div to others, I would recommend using JQuery. This can be done like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function changeColor(){
$( document ).ready(function() {
$("div").addClass("work");
});
}
</script>
<style>
.work {
color: red
}
</style>
<div style="width: 100%" class="work"><h1>Hello</h1></div>
<div style="width: 100%" class=""><h1>Hello</h1></div>
<button onclick="changeColor()">Change second color by inserting class!</button>
function applyClass(elem_position, tagname, classname)
{
var div_elems = document.querySelectorAll(tagname);
for (var i = elem_position-1; i < div_elems.length;i++)
{
div_elems[i].className=classname;
}
}
Usage
Applies class some_class to div elements starting from position 3
applyClass(3,'div','some_class');

How to make 'onmouseout' event "understand", that the "span" height was increased?

I have a code:
<span id="one" onmouseover="AddString()" onmouseout="RemoveString()">First Line
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
document.getElementById("two").innerHTML = 'Second Line';
}
function RemoveString() {
document.getElementById("two").innerHTML = '';
}
</script>
If you hover mouse over the first line,then the second one appears. If you put mouse out of the first line (and do that slowly enough), then the second line disappears.
What do I need: after you have hovered over the first line and the second line has appeared, then the second line must disappear only if the cursor is outside the first OR second line. Which means, that if move mouse from the first line to the second line, the latter should not disappear. At the moment it does.
I have tried the following:
<span id="one" onmouseover="AddString()">First Line
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
var element = document.getElementById("one");
element.removeEventListener("mouseover", AddString);
document.getElementById("two").innerHTML = 'Second Line';
element.addEventListener("mouseout", RemoveString, true);
}
function RemoveString() {
var element = document.getElementById("two");
element.removeEventListener("mouseout", RemoveString);
element.innerHTML = '';
element.addEventListener("mousever", AddString, true);
}
</script>
and was advised to do the following:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<span id="one">First Line</span>
<span id="two">Second Line</span>
</body>
</html>
No help. All those variants do not work. What is the solution?
You can use your last example, just change the <span> tags to <div> tags and it works no problem. Or if you want to keep them as <span> tags you can add #one,#two { display:block; } to your css to make them block items (so they will act like div tags anyway).
You can also limit the width of the div to ensure that it doesn't appear when you hover just anywhere on the line.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one,#two { width: 100px; background-color: beige; }
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<div id="one">First Line</div>
<div id="two">Second Line</div>
</body>
</html>

Categories