My goal is to make a script click continuously on this two button without need to call it manually, my script have the ability to click on the button, but I don't know
how to automate the action, what I'm trying to do is keeping clicking with no number limit of clicks.
The script I used to click on the button
let buttonTags = document.getElementsByTagName("button");
let followButton = "Follow";
let unFollowButton = "Unfollow";
let found;
for (let i = 0; i < buttonTags.length; i++) {
if (buttonTags[i].textContent == followButton || unFollowButton) {
found = buttonTags[i];
break;
}
}
found.click()
This is the test, I used two divs intentionally.
HTML
<div id="hidde">
<button onclick="myFunction()">Follow</button>
</div>
<div id="hidden">
<button onclick="myFunction()">Unfollow</button>
</div>
CSS
body{
display: flex;
}
div{
border: #000 solid 1px;
padding: 20px;
}
#hidden {
display: none;
}
Javascript
function myFunction() {
let y = document.getElementById("hidde");
let x = document.getElementById("hidden");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
You can programatically trigger a click with .click()
https://www.w3schools.com/jsref/met_html_click.asp
But also your use case perfectly suits a Do/While loop :)
Related
I'm making a small website and I'm trying to make two elements repeatedly hide and show so it'll look like it's switching between the two. I have a draft code that would do that but I'm not sure how to make it loop.
function MyDraft(){
var x = document.getElementById("one");
var y = document.getElementById("two");
if (y.style.display === "none"){
x.style.display = "none";
y.style.display = "block";
}
else {
x.style.display = "block";
y.style.display = "none";
}
}
If you use classes you can toggle an element having an hidden class (which sets visibility: hidden). Then just add the code that does the toggling for the elements inside setInterval.
// Cache the elements
const boxes = document.querySelectorAll('.box');
// Iterate over the elements toggling their
// `hidden` class
setInterval(() => {
boxes.forEach(box => box.classList.toggle('hidden'));
}, 1000);
.box { width: 30px; height: 30px; background-color: lightgreen; }
.hidden { visibility: hidden; }
<div class="box"></div>
<div class="box hidden"></div>
Just use setInterval
function MyDraft(){
var x = document.getElementById("one");
var y = document.getElementById("two");
if (y.style.display === "none"){
x.style.display = "none";
y.style.display = "block";
}
else {
x.style.display = "block";
y.style.display = "none";
}
}
var interval = setInterval(myDraft, [timeInMilliseconds]);
Save the interval variable somewhere so you can later call clearInterval if you want
I have a relatively simple demo here where I have two embed elements with the same class, and upon page load one is set to display and the other is not. I'm calling a function and setting an interval for every 5 seconds starting on page load which should toggle the display rules for the classes (only one embed element should show at a time and then they should alternate on the timer).
I have border colors on the embed elements for testing, but it seems like neither element is showing on page load once I added the second 'if' statement in the JS
What am I doing wrong
window.onload = function () {
test();
setInterval(function() {
test();
}, 5000);
}
function test(){
console.log('starting');
var all = document.getElementsByClassName('pdfEmbed');
for (var i = 0; i < all.length; i++) {
if(all[i].style.display = "none"){
all[i].style.display = "block";
}
if(all[i].style.display="block"){
all[i].style.display = "none";
}
}
}
<embed class="pdfEmbed" src="#" style="margin-top: 40px;position:absolute; display: block; left: 0; top: 0; border: 1px solid red;" width="100%" height="100%" type="application/pdf">
<embed class="pdfEmbed" src="#" style="margin-top: 40px;position:absolute; border: 1px solid black; display: none; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
Here's what's happening with the second if:
// set current child display to "block" if it is "none"
if(all[i].style.display = "none"){
all[i].style.display = "block";
}
// the check is always true, since you just set the display to "block"
if(all[i].style.display="block"){
// therefore, for all elements set display to none
all[i].style.display = "none";
}
The fix is easy: Use an else if instead of the second if. In case you only want to have the two display states "none" and "block", an else is enough.
EDIT: I just noticed a second error. You have to use comparison (== or ===) instead of assignment (=) in your if conditions. So this should be working:
if(all[i].style.display == "none") {
all[i].style.display = "block";
} else {
all[i].style.display = "none";
}
var last_index = 0;
function test() {
var e = document.querySelectorAll(".pdfEmbed");
for (var k = 0; k < e.length; k++) {
e[k].style.display = k == last_index ? "block" : "none";
}
last_index++;
if (last_index >= e.length) { last_index = 0; }
}
why does this not work? I want to click a button to show the "nav", and then if the "nav" is blocked the "move" will be text-aligned to center.
I know I could just textAlign it the "move" with the same button, but that is not what I'm looking for.
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
btn.addEventListener('click', () => {
if (nav.style.display === "none") {
nav.style.display = "block";
} else {
nav.style.display = "none";
}
});
if (nav.style.display === "block") {
move.style.textAlign = "center";
}
#nav {
background-color: lightblue;
display: none;
}
li {
display: inline;
}
<div id="nav">
<li>one</li>
<li>two</li>
<li>three</li>
</div>
<div id="move">
<h4>Hello</h4>
</div>
<button id="btn">change</button>
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
btn.addEventListener('click', () => {
if (nav.style.display === "none") {
nav.style.display = "block";
move.style.textAlign = "center";
} else {
nav.style.display = "none";
}
});
Try to use, in this way you force the text inside #nav to be aligned in the center.
#nav {
background-color: lightblue;
display: none;
text-align: center;
}
If you need to change the inline style dynamically based on some condition in javascript you could consider looking at the inline style of your dom node using style property ex: nav.style.display
A simple example:
if (nav.style.display === "none") {
nav.style.display = "block";
move.style.textAlign = "center";
} else {
nav.style.display = "none";
}
More info on style property can be found here.
I'm a total beginner in Javascript, and I came across this script for a show/hide toggle:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
I would like to change the font size of the "show" and "hide" in this code. Seems like a really easy task, but I've looked everywhere and can't find an answer.
Also another question, how could I modify the code so that I don't have to copy and paste the whole code and changing toggle() to toggle2(), toggle3() for each separate show/hide toggle on the same page?
Thank you very much!
You can use element.style.fontSize to dynamically set the font size of an element.
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.style.fontSize = "50px";
text.innerHTML = "show";
} else {
ele.style.display = "block";
text.style.fontSize = "30px";
text.innerHTML = "hide";
}
}
document.getElementById("displayText").addEventListener('click', function(){
toggle();
});
#toggleText{
display:none;
}
#displayText{
color: #00af00;
background: #d9d9d9;
padding: 4px 20px;
display: inline-block;
text-decoration:none;
}
<p id="displayText">show</p>
<div id="toggleText">
Hidden or naw?
</div>
You don't have to create toggle2, toggle3, This will make your code redundant. Instead, add a parameter on your toggle to pass the toggleText.
<script language="javascript">
function toggle(toggleText) {
var ele = document.getElementById(toggleText);
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
For the font, you can have this on your css.
<style>
#displayText {
font: bold 12px Georgia, serif;
}
</style>
I have made a dropdown that appears on click on a button. Pretty simple, except for how I have to click twice to get the js function to execute. After I click it the first, it appears and disappears like it should - taking only one click. I have no clue why it would require this and have searched for fixes, but none of them seem to work.
Here is my HTML:
<ul class="resources-menu">
<li>
<button onclick="res()" id="resbut" onblur="setTimeout('reshide()', 175)">Resources</button>
<ul id="resblock">
<li style="padding-bottom: 20px; text-align:center;padding-top:25px">
<button onclick="dirlnk()">Directory</button>
</li>
</ul>
</li>
</ul>
CSS:
.resources-menu {
width:88px;
float:left;
}
#resbut {
font-weight:700;
height:30px;
text-decoration:underline;
border-radius:3px;
border-color: black;
}
ul.resources-menu, ul.resources-menu ul {
list-style:none;
margin:0;
padding:0;
position: relative;
}
#resblock {
width: 90px;
background-color: lightblue;
display: none;
position: absolute;
border-bottom-left-radius: 15px;
border-bottom-right-radius:15px;
border-top-right-radius:10px;
border:solid;
border-color:black;
}
JavaScript
function res() {
if (document.getElementById('resblock').style.display == 'none') {
document.getElementById('resblock').style.display = 'block';
document.getElementById('resbut').style.background = "lightblue";
document.getElementById('resbut').style.borderBottomRightRadius = "0px";
document.getElementById('resbut').style.borderBottomLeftRadius = "0px";
document.getElementById('resbut').style.borderBottom = "none";
document.getElementById('resbut').style.textDecoration = "none";
} else {
document.getElementById('resblock').style.display = 'none';
document.getElementById('resbut').style.background = "";
document.getElementById('resbut').style.borderBottomRightRadius = "";
document.getElementById('resbut').style.borderBottomLeftRadius = "";
document.getElementById('resbut').style.borderBottom = "";
document.getElementById('resbut').style.textDecoration = "";
}
}
function reshide() {
document.getElementById('resblock').style.display = 'none';
document.getElementById('resbut').style.background = "";
document.getElementById('resbut').style.borderBottomRightRadius = "";
document.getElementById('resbut').style.borderBottomLeftRadius = "";
document.getElementById('resbut').style.borderBottom = "";
document.getElementById('resbut').style.textDecoration = "";
}
function dirlnk() {
window.location = "/Portal/directory";
}
You're looking at the style property when it's in the CSS files, not a style attribute. Use getComputedStyle instead:
function res() {
var resblock = document.getElementById('resblock');
var resblockStyle = resblock.style;
var resbutStyle = document.getElementById('resbut').style;
if (getComputedStyle(resblock).display === 'none') {
resblockStyle.display = 'block';
resblockStyle.background = "lightblue";
resbutStyle.borderBottomRightRadius = "0px";
resbutStyle.borderBottomLeftRadius = "0px";
resbutStyle.borderBottom = "none";
resbutStyle.textDecoration = "none";
} else {
reshide();
}
}
function reshide() {
var resblockStyle = document.getElementById('resblock').style;
var resbutStyle = document.getElementById('resbut').style;
resblockStyle.display = 'none';
resbutStyle.background = "";
resbutStyle.borderBottomRightRadius = "";
resbutStyle.borderBottomLeftRadius = "";
resbutStyle.borderBottom = "";
resbutStyle.textDecoration = "";
}
function dirlnk() {
window.location.href = "/Portal/directory";
}
It's also a good idea to cache your variables so you don't need to query the DOM for each style addition. Your reshide function does the same thing as the else in your res function -- you should avoid duplicating code where practicable.
Compatibility issues
As #garromark correctly notes, this solution won't work if you need to support older browsers (i.e. IE8 and below). Alternatively, you can add a class called .no-display and check whether that class is present or not:
.no-display {
display: none !important;
}
Then your JavaScript check:
if (/\bno\-display\b/.test(resblock.className)) {