Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 days ago.
Improve this question
I want to make an account generator site, I found a ready-made script. I want to click on the link that appears on the screen when I press generete, but when I press generete, the text will be written on the screen, not the link, 'click for account' will be written there, but I couldn't do it.
Note: I am using the translation service.
<!DOCTYPE HTML>
<html>
<title>Netflix Account Generator</title>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js#1.5.7/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>
<link rel="icon" type="image/png" href="logo.png">
<meta name="description context="keywords">
<meta name="keywords" content="keywords">
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel='stylesheet' type='text/css'>
<script type='text/javascript' src='hesaplar.js'></script>
<script type="text/javascript">
document.oncontextmenu =new Function("return false;")
document.onselectstart =new Function("return false;")
</script>
<header>
<span style="cursor: pointer;">Netflix Account Generator</span>
</header>
<style>
header { margin-top: 40px; position: absolute; float: left; font-size: 24px; font-weight: bold; }
nav { margin-top: 40px; float: right; color: #FFF; font-size 16px; letter-spacing: 1px; } nav ul { list-style: none; margin: 0; margin: 0; } nav li { display: inline; float: left; } nav li a { text-decoration: none; margin: 0px 10px 0px 10px; color: #FFF; } nav li a:hover { color: #88a0ad; transition: 0.3s; }
</style>
<nav>
<ul>
<li><a class="label1" href="#">Spotify</a></li>
<li><a class="label2" href="#">Exxen</a></li>
<li><a class="label3" href="#">BluTV</a></li>
<li><a class="label4" href="#">PuhuTV</a></li>
</ul>
</nav>
<section>
<h1>Netflix Account Generator</h1>
<FORM NAME="WordForm">
<INPUT TYPE=TEXT NAME="WordBox" id="wordbox"><BR>
<INPUT TYPE=BUTTON VALUE="Generate" onClick="PickRandomWord(document.WordForm);" id="button">
</FORM>
javascript
var wordsx = 5
var urlolustur = new BuildArray(wordsx)
urlolustur[1] = "https://shrinkurl.org/lUA8Swhp"
urlolustur[2] = "https://shrinkurl.org/oTcChjQ"
urlolustur[3] = "https://shrinkurl.org/kas1"
urlolustur[4] = "https://shrinkurl.org/Xfly9"
urlolustur[5] = "https://shrinkurl.org/RzVEXG"
function BuildArray(size){
this.length = size
for (var i = 1; i <= size; i++){
this[i] = null}
return this
}
function PickRandomWord(frm) {
var rnd = Math.ceil(Math.random() * wordsx)
frm.WordBox.value = urlolustur[rnd]
}
Related
Hello I am new to HTML and CSS, and I was trying to display the contents of a div element when I hover over a li element. So basically what I am trying to do is when I hover over one li element (say: ls1), I want to display dv2. However, my code does not display the contents even when I hover over it. Please help!! Thank you.
const list_dv1 = document.querySelectorAll('.dv1 li');
function show_item() {
list_dv1.forEach((item) =>
item.classList.remove('hovered'));
this.classList.add('hovered');
}
list_dv1.forEach((item) =>
item.addEventListener('mouseover', show_item));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
position: relative;
background-color: black;
height: 100vh;
width: 100%;
}
.dv1 {
background-color: yellow;
cursor: pointer;
}
.dv1 li:hover {
transform: scale(1.2);
}
ul {
list-style-type: none;
display: flex;
}
li {
margin: 20px;
}
.dv2 {
background-color: greenyellow;
color: black;
}
.dv2 {
display: none;
}
.ls1:hover+.dv2 {
display: block;
}
.dv3 {
background-color: yellowgreen;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Practice Hiding Elements</title>
</head>
<body>
<div class="main">
<div class="dv1">
<ul>
<li class="ls1">Hover over me once</li>
<li class="ls2">Hover over me twice</li>
</ul>
</div>
<div class="dv2">You found me!</div>
<div class="dv3">You found me twice!</div>
</div>
</body>
</html>
This question already has answers here:
addEventListener calls the function without me even asking it to
(5 answers)
What is the difference between a function call and function reference?
(6 answers)
Closed 1 year ago.
I'm an absolute beginner in javascript I want to open and close the burger menu. I don't know why it doesn't work with me. When I write .open{display:block} it shows up and I can't even open or close the burger menu how I can fix this and why it shows up like this ?
here the code:
let btn = document.getElementById('btn-js');
let sidebar = document.getElementById('side-bar');
btn.addEventListener('click',show());
function show(){
sidebar.classList.toggle('open');
}
*{
margin: 0;
padding:0;
box-sizing: border-box;
list-style: none;
}
.side-bar{
display: none;
background: cornflowerblue;
width: 275px;
text-align: center;
font-size: 19px;
}
.side-links{
padding: 30px 0;
}
.side-links li{
padding: 30px 0;
}
#media all and (max-width:800px) {
.open{
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<button id="btn-js" class="btn-css">open</button>
<div class="side-bar" id="side-bar">
<ul class="side-links">
<li>home</li>
<li>about</li>
<li>contact</li>
<li>acount</li>
</ul>
</div>
<script src="js.js"></script>
</body>
</html>
I'm currently trying to create a spelling quiz as part of a project website using HTML, CSS and JScript.
The concept is: the user is shown a word with two letters missing (shown by the underscores). They then select which answer is right (the three button options) and an alert message should come back on the window to say if they are correct or incorrect.
My idea behind the code I wrote so far was to have an event listener on the button that when clicked would trigger the alert either saying correct or incorrect if I have programmed it to be so.
My code isn't working, could anyone help me?
var aChoice = document.getElementById("S1");
aChoice.addEventLister("Click", C1)
function C1 ()
{
alert("Correct");
}
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
#S1 {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class ="Albl">Answer:
<button id="S1">a i</button>
<button id="S1">i a</button>
<button id="S1">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
(More code I was intending to write on Javascript here for logic purposes.)
var bChoice = document.getElementById("S2");
bChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
var cChoice = document.getElementById("S3");
cChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
1.You cannot have more than one id="S1"! Since the id attribute is unique for the entire html document. In your case, it is better to use the class. Since there may be more buttons with answer options, like this:
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
2.Now on js ... I corrected your code. Also, you need to change the method of accessing elements (buttons). Like this:
var aChoice = document.querySelector(".btn");
3.Now everything is ready, but not completely! You need the logic for determining the correctness of the choice of the option by buttons.
var aChoice = document.querySelectorAll(".btn");
aChoice.forEach(function(aChoice_current, index) {
aChoice_current.addEventListener('click', function(){
if (index == 0) {
console.log('The answer is correct! :)');
} else {
console.log('The answer is not correct! :(');
}
})
})
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
.btn {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
My main.html displays the menu.htm and welcome.htm using frameset. Drop down menu buttons "Admin..." and "Scheduler..." suppose to show dropdown content on mouse hover. Since welcome.htm is on top of menu.htm therefore content of the dropdown button doesn't show up.
However, All menu button work as expected when open the menu.htm as standalone page(see attached pic)menu.htm But drop-down buttons content does not show up when open in main.html using frame tags.
main.html
<html>
<head>
<title>Main Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<meta http-equiv="cache-control" content="max-age=0" />
</head>
<frameset rows = "25,*" >
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="no" id="menu_frame1"
name="menu_frame" src="menu.htm" />
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"
id="content_frame1" name="content_frame" src="welcome.htm" />
</frameset>
</html>
Here is menu.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Main Menu</title>
<style type="text/css">
body
{
background-color: #333;
border: 0px;
margin: 0px;
padding: 0px;
FONT-SIZE: 15px;
FONT-FAMILY: sans-serif;
}
.topnav
{
overflow: hidden;
background-color: green;
}
.topnav a
{
float: left;
color: #fec10d;
font-size: 15px;
text-align: center;
text-decoration: none;
font-weight: none;
padding-left: 10px;
padding-right: 10px;
}
.topnav a:hover
{
background-color: #ddd;
text-decoration: underline;
color: black;
}
.topnav a.active
{
margin-top: 5px;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 15px;
border: none;
outline: none;
color: #fec10d;
padding: 5px 7px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #fec10d;
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 90px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
background-color: #582c83;
color: white;
padding: 5px 7px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #fec10d;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
<script type="text/javascript">
function open_in_content(url)
{
parent.document.getElementById("content_frame").src = url;
}
function open_in_new(url)
{
window.open(url);
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" href="/mainmenu" target="_top">Home</a>
<a class="active" href="/acctlist" target="content_frame">Accounts</a>
<a class="active" href="/reports/main" target="content_frame">Customers</a>
<div class="dropdown">
<button class="dropbtn">Admin...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Add Account
Files
Add Rule
Account Update
Ref Upload
Check stats
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Scheduler...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
New Job
Remove Job
Add checkpoint
</div>
</div>
<a class="active" href="help/index.htm" target="content_frame">Help</a>
</div>
</body>
</html>
Here is welcome.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>
Main Menu Welcome Page
</TITLE>
</HEAD>
<BODY>
Use the links at the top of the menu to navigate.
</BODY>
</HTML>
first of all Why not use html5?
You should use iframe instead of frame
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
after, you add id to iframe and you add display option or you add "position:absolute;z-index" these iframes with css.
after, then was mouseover in iframe you change z-index option with javascript
I help you but first
Can you review jquery.load()
https://api.jquery.com/load/
I think it might be easier for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="divMenu"></div>
</body>
</html>
<script>
$(document).ready(function(){
$("#divMenu").load("./menu.html");//.txt or html or url
});
</script>
try this
Even if the scroll page, the menu will remain at the top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:#111;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src="./menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
try this
I made the "manubar "background transparent and when mouseover and manubar the height will automatically 300px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:transparent;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src=".menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
<script>
var menuBar = document.querySelector(".menuBar")
menuBar.onmouseover = function(){
menuBar.style.height="300px"
}
menuBar.onmouseout = function(){
menuBar.style.height="50px"
}
</script>
I am creating a website on github pages using bootstrap, but the drop-down does not seem to be working on the nav bar (sometimes works, sometimes not). I am using $("#nav").load("url");
to load the nav bar so I can change it and have the changes apply to many pages. The drop-downs work on the page that I am loading if I go there directly. The web page is http://scratchos.github.io/index2.html
/resorces/navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css, i do not know if it is used on the page, i think not-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--meta-->
<meta charset="utf-8">
<!--get url parameters for adding classes to set items to make it applicable to all pages-->
<script>
function getParameter(theParameter) {
var params = window.location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var p=params[i].split('=');
if (p[0] == theParameter) {
return decodeURIComponent(p[1]);
}
}
return false;
}
</script>
<!--bootstrap dropdown code-->
<script>
$(document).ready = function () {
$('.dropdown-toggle').dropdown();
};
</script>
</head>
<body>
<!--bootstrap nav bar-->
<div class="nav nav-tabs">
<li id="home">Home</li>
<li id="projects">My Projects</li>
<li id="hfb">
<!--JQuery-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Hungry-For-Blocks<span class="caret"></span></button>
<ul class="dropdown-menu">
<li id="hfb-home">Home</li>
<li id="hfb-about">About</li>
<li id="hfb-doc">Documentation</li>
<li id="hfb-ins">Instalation</li>
</ul>
</div>
</li>
<li id="tut">Tutorials</li>
</div>
<!--script to apply the classes based on url params once page has loaded; it is done in this way because github does not support php:(-->
<script>
window.onload = function () {
$("#" + getParameter("active")).addClass("active");
if (getParameter("dis") !== false) {
$("#" + getParameter("dis")).addClass("disabled");
};
};
</script>
</body>
</html>
/stylesheets/main2.css
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
color: #ff6600;
}
.jumbotron .container {
position: relative;
top: 100px;
}
.jumbotron h1 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotronm p {
font-size: 20px;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.forum {
padding: 20px;
}
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--rendering script in css and jquery for the site, not relevent i think?-->
<link rel="stylesheet" href="//scratchos.github.io/ScratchBlocks/scratchblocks2.css">
<script src="//scratchos.github.io/ScratchBlocks/scratchblocks2.js"></script>
<script>
$(document).ready(function() {
scratchblocks2.parse();
});
</script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css custom page css i don't think it is needed in this, because everything it formats has been omitted from this code?-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--set jubmotron background, probably an inefficient way of doing it?-->
<style>.jumbotron{background-image:url('https://scratchos.github.io/images/jumbotron.png');}</style>
<!--bootstrap metas-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--title-->
<title>-ScratchOs|Home</title>
<!--loading the nav bar-->
<script>
$(function(){
$("#nav").load("http://scratchos.github.io/resorces/navbar.html");
});
</script>
<!--bootstrap dropdown code-->
<script>
$('#hfb a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</head>
<body>
<!--nav bar-->
<div id="nav"></div>
<!--the rest of the page is not included-->
</body>
</html>
If you can fix the dropdowns it would be excellent. Thanks :)
I would consider using a script.js file instead of embedding it. If you go to http://scratchos.github.io/resorces/navbar.html it works just fine, the problem is that you're defaulting to your index.html (as you should), but it's not getting the code that you put straight into your navbar.html. Making a script file that both pages reference should fix your issue.
Just remove the plugins that are common in both the pages and that will fix it.