I want to make a 'Spoiler Alert' button.
First of all, I don't know anything.
I'm really sorry.
I'm doing this because I suddenly want to do it.
Anyway, this is my best result.
<button id="change9">Spoiler Alert</button>
<script>
document.getElementById("change9").onclick = function(){
document.body.style.color = '#ffffff';
}
</script>
<p> </p>
Not Spoiler
<p> </p>
<span style="background-color:#000000;">Spoiler</span><br />
But what I really wanted was to have both results. (Not Spoiler/Spoiler)
In other words,
... span style="background-color:#000000;" ...
I want to delete this part by clicking a button.
Is it possible?
I've been looking for it,
But there is only a way to change the entire background color,
and I can't find a way to change the text background color.
here's a fleshed out version of code that handles multiple spoiler alert buttons for each spoiler
document.querySelectorAll(".showspoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
document.querySelector(`.${this.dataset.target}`).classList.toggle('show');
});
});
.spoiler {
color: #ffffff00;
background-color: #000000;
}
.spoiler.show {
color: #ffffffff;
}
<button class="showspoiler" data-target="spoiler1">Spoiler Alert</button>
<br/> Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
<button class="showspoiler" data-target="spoiler2">Spoiler Alert</button>
<br/> Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />
Though - the way I'd do it is different, I wouldn't have buttons, I'd just click on the spoiler itself
document.querySelectorAll(".spoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
this.classList.toggle('show');
});
});
.spoiler {
color: #ffffff00;
background-color: #000000;
cursor: pointer;
}
.spoiler.show {
color: #ffffffff;
}
Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />
When you click the button, you have to tell the javascript which element to change. We could tell it to change a span tag but you might have more than one. So I put a class on it called "spoiler". And you can then do something like this:
document.querySelector('.spoiler').style.color="#ffffff";
However, it's better (and easier) to work with css and classes. So instead, I set up a class called 'clicked' and now we just add that to the span like this:
document.querySelector('.spoiler').classList.add('clicked');
document.getElementById("change9").onclick = function(e) {
document.querySelector('.spoiler').classList.add('clicked');
}
.spoiler {
background: #000;
color: #000;
display: inline-block;
padding: 5px;
}
.spoiler.clicked {
background: #fff;
color: #f00;
border: 1px solid #f00;
}
<button id="change9">Spoiler Alert</button>
<p> </p>
Not Spoiler
<p> </p>
<span class='spoiler'>Spoiler</span><br />
You are close! Give an ID to the SPAN:
<span id="myspoiler" style="background-color:#000000;">Spoiler</span>
Then change body to your new ID
document.getElementById("myspoiler").style.color = '#ffffff';
Well, here is my snippet:
<button id="change">Spoiler Alert</button>
<br><br>
<span>Not Spoiler</span>
<br><br>
<span class='spoiler' id='spoiled'>Spoiler</span>
.spoiler {
display: none;
}
.show {
display: inline-block;
border: 1px solid red;
text-align: center;
padding: 2px 4px;
color: red;
}
let btn = document.getElementById("change");
let spoilSpan = document.getElementById("spoiled");
btn.addEventListener("click", spoilerAlert);
function spoilerAlert() {
spoilSpan.classList.toggle("show");
}
Thanks to you guys, I got what I wanted.
Thank you.
document.querySelectorAll(".spoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
this.classList.toggle('show');
});
});
.spoiler {
display: inline-block;
background-color: #000000;
cursor: pointer;
}
.spoiler.show {
background: none;
}
Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />
Related
My webpage is constructed as:
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor"></button>
</div>
</div>
</div>
</a>
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor"></button>
</div>
</div>
</div>
</a>
I want to be able to change the color of the button inside the particular <a> </a> that's being hovered over. How should I write the javascript to do it? Thanks so much for the help!
First at all, you only need a button to fire an JS onclick event. In every other case you use a div to style a "button". Also a button is not an empty tag and therefor needs a closing tag <button>Text</button>
Just like this:
a {
text-decoration: none;
color: black;
}
a div {
border: 1px solid black;
width: min-content;
white-space: nowrap;
padding: 5px;
}
<div>I'm a Link-Button</div>
to change the color during hover, you dont need JS. You can simply use the :hover pseudo selector like this:
a {
text-decoration: none;
color: black;
}
a div {
border: 1px solid black;
width: min-content;
white-space: nowrap;
padding: 5px;
}
a:hover div {
background-color: red;
}
<div>I'm a Link-Button</div>
As you insist on using your invalid HTML and seem not to understand the use of :hover the same for your code:
.hoverMe:hover .changeColor {
background-color: red;
}
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor">Button 1</button>
</div>
</div>
</div>
</a>
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor">Button 2</button>
</div>
</div>
</div>
</a>
This is a pretty basic question checking docs usually can help you. Check this out
The use of :hover pseudo selector will help you achieve what you want. In our example we see the a:hover action which enables the hover color change.
a:hover {
background-color: yellow;
}
a {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
w3schools.com
wikipedia.org
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
I am wanting to make a text box on a webpage that anyone can edit and also save. So when they refresh the page their text is still there.
Here is the simple code I have so far. I can edit it just haven't figured out how to save it.
<div id="example-one" contenteditable="true">
<style scoped>
#example-one { margin-bottom: 10px; }
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable="true"]:hover { outline: 2px dashed #0090D2; }
</style>
<p>Save Text</p>
</div>
Here's a minimal example using localStorage:
<div id="example-one" contenteditable="true">
</div>
<p id="save">Save Text</p>
<script>
document.getElementById("save").addEventListener('click', function(el) {
localStorage.setItem("text", document.getElementById('example-one').innerHTML);
});
window.onload = function() {
var text = localStorage.getItem("text");
document.getElementById('example-one').innerHTML = text;
}
</script>
I am using the full calendar. I want to change the default, hover or active state for buttons on the header.
All I want it to make :
default: black background, white text color
hover : red background color, white text color
active: green background color, white text color
The CSS code:
.fc-state-default {
color: white;
background-color: black;
}
.fc-state-active {
background-color: green;
}
.fc-state-hover {
background-color: red;
color: white;
border-color: black;
border-width: medium;
}
For some reasons that I can't understand I can't change the style of those buttons.
Here is a js fiddle. JSFIDDLE
Please, can somebody help me!
EDIT if I have something like this:
<div class="fc-right">
<div class="fc-button-group">
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-left fc-state-active">month</button>
<button type="button" class="fc-agendaWeek-button fc-button fc-state-default">week</button>
<button type="button" class="fc-agendaDay-button fc-button fc-state-default">day</button>
<button type="button" class="fc-today-button fc-button fc-state-default fc-corner-right fc-state-disabled" disabled="disabled">today</button>
</div>
</div>
It is quite simple, just add these css classes:
.fc-button .fc-button-inner:hover {
background-color: red;
color: #fff;
}
.fc-button.fc-state-active .fc-button-inner {
background-color: green;
color: #fff;
}
.fc-button .fc-button-inner {
background-color: #000;
color: #fff;
}
Here is the fiddle: fiddle link
I am working through "Google Apps Script" by James Ferreira.
I have found several issues with code examples given so far and have been able to stumble my way through them.
I'm not great with HTML and this one has me stumped.
.gs
function startWorkflow() {
var html = HtmlService.createTemplateFromFile('startWorkflow').evaluate()
.setTitle('Start Workflow').setWidth(300)
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
ui.showSidebar(html);
}
.html
<div id="wrapper">
<div>
<span>Let's get started with your workflow.
First;
Add an approver by entering their email address
in the Approvers box and clicking the add button.
When you are done adding appovers, click the Start Workflow button.</span>
</div>
<br>
<div>
<span class="sectionHeader">Approvers</span><br>
<div id="approvers"></div>
<div>
<form id="addApprover">
<input type="email" id="approver" placeholder="Email Address">
<input type="submit" class="button blueButton" value="Add">
</form>
</div>
<br>
<div class="center">
<span id="startButton" class="button redButton">Start Workflow</span>
</div>
</div>
<?!= HtmlService.createHtmlOutputFromFile('styles').getContent(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
styles.html
<style type="text/css">
.sectionHeader {
color: #202020 ;
font-size: 18px;
text-decoration:underline;
margin-bottom: 20px;
}
.button {
color: #FFFFFF;
font-size: 12px;
moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 3px;
border:0;
}
.blueButton {
background-color: #3366FF;
}
.redButton {
background-color: #C80000;
}
.button:hover {
opacity:0.7;
}
.center {
text-align: center:
}
#wrapper {
margin:2px 4px 3px 4px;
font-family: Verdana, Generva, sans-serif;
}
.reminder {
color: #FFFFFF;
background-color: #3366FF;
font-size: 10px;
moz-border-radius: 3x;
-webkit-border-radius: 3px;
padding: 3px;
}
The issue is with the "start workflow" button as I only have text.
This is the the HTML you are referencing:
<span id="startButton" class="button redButton">Start Workflow</span>
The span tag does support events like onclick and onmouseup. It would look like this:
<span id="startButton" class="button redButton" onmouseup="fncStartWorkFlow()">Start Workflow</span>
There needs to be a corresponding function in a <script> tag:
<script>
function fncStartWorkFlow() {
console.log('fncStartWorkFlow() ran!');
//more code here
};
</script>
Make those changes, then view the browser console to see if a message printed to the console.
i have a strange ios safari issue - i can reproduce the problem in phonegap and the ios browser too:
when you click outside the area of an A tag is has the same effect as actually clicking the tag.
it does not matter if the tag has just an HREF or a click handler.
you can find the code here: http://jsfiddle.net/ygaeb0r5/
also below.
<style>
* {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
outline: none;
text-decoration: none;
color: #000000;
display: inline-block;
background-color: green;
}
img {
border: none;
}
span {
background-color: yellow;
padding: 6px;
display: inline-block;
}
</style>
<title>Template App</title>
</head>
<body>
<div>top
<br />
<br />
<br />
<br />
<span>click here</span>
</div>
<a></a>
<a id="a" href="#/chat/name-0">
name 0 <br>description 0
</a>
<br />
<a id="b" href="#/chat/name-1">
name 1 <br>description 1
</a>
<script type="text/javascript">
var a = document.getElementById("a");
a.addEventListener("click", function() { alert("a clicked"); });
var b = document.getElementById("b");
b.addEventListener("click", function() { alert("b clicked"); });
</script>
</body>
i have also attached a screen shot where i marked in blue the approximative area which when clicked triggers the click for #a or #b - it even includes the bottom half of "click here".
i can also reproduce is on the actual device, but it is easier in the simulator - since you can click more precise using the mouse.