Hey I'm having a problem with the prompt method in Javascript.
What I try to do is make the H1 equal to the user his answer.
The problem is that the function does not take the answer in it's function.
I tried to find something about it on youtube without succes.
Any tips or help would be appreciated
$(document).ready(function() {
console.log('Document loaded');
});
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
<DOCTYPE html>
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Pacifico|Maven+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>HAL Tech</title>
</head>
<body>
<div class="parallax-group">
<h1 class="front">HAL Tech</h1>
<!--
<ul class="nav">
<li href="#">Tech club</li>
<li href="#">Te doen</li>
<li href="#">Projecten</li>
<li href="#">Dingen</li>
</ul>
-->
<img src="POEP.jpg" class="back" alt="">
</div>
</body>
</html>
'answer' in $('.front').text('answer'); should not be a string, it should reference your answer variable:
$('.front').text(answer);
'answer' is the literal string "answer", whereas answer refers to your variable.
$(document).ready(function() {
console.log('Document loaded');
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
});
<DOCTYPE html>
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Pacifico|Maven+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>HAL Tech</title>
</head>
<body>
<div class="parallax-group">
<h1 class="front">HAL Tech</h1>
<!--
<ul class="nav">
<li href="#">Tech club</li>
<li href="#">Te doen</li>
<li href="#">Projecten</li>
<li href="#">Dingen</li>
</ul>
-->
<img src="POEP.jpg" class="back" alt="">
</div>
</body>
</html>
As further discussed in the comments, your JS is running before the DOM loads. You can either move it to the bottom of the body, or change your code to be within the $(document).ready function:
$(document).ready(function() {
console.log('Document loaded');
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
});
Related
If I use the script tag or link the file the js does not Run if it is a problem with the js here is my code.
$("img").on("contextmenu", function (e) {
return false;
});
$("img").mousedown(function (e) {
e.preventDefault()
});
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
if (item.querySelector(".submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
I have the disabled cache to and I have reloaded and Copied the exact file name to my script tag that links the javascript.
And my HTML. Because it might be a problem here.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>Upright Code - Hire Me Coder</title>
<meta name="description" content="Hire Me, I am a Coder, Web and coding tutorials" />
<meta name="keywords"
content="HTML,CSS,JavaScript, Hire Coder, Hire, Code, Coder, Coding Lessons, Lessons on HTML, Lessons on CSS" />
<meta name="author" content="--------" />
<!-- Awsome Font -->
<script src="https://kit.fontawesome.com/82298f2f89.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Javascript js -->
<script src="js\Main_Javascript.js" defer></script>
<!-- style css -->
<link rel="stylesheet" href="css/style.css">
<!-- fevicon -->
<link rel="icon" href="images/logo.png" type="image/png" />
<!-- Tweaks for older IEs-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"
media="screen">
</head>
<body>
<!--
<script>
window.location.replace("https://uprightcode.com/comming-soon");
</script>
-->
<nav>
<ul class="menu">
<li class="logo">Upright Code</li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Plans</li>
<li class="item">Lessons
</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<section class="hero">
<div class="hero-content">
<h1 class="hero-title">
Discover the World
</h1>
<h2 class="hero-subtitle">
We offer the best adventure holidays and tailor-made trips!
</h2>
<button type="button" class="hero-button" onclick="location.href='tours.html'">
Search for tours ยป
</button>
</div>
</section>
<img src="images/garfield-movie.webp">
</body>
</html>
<script>
setTimeout(function () { console.clear(); }, 10000);
</script>
I put where the js is my full path to that is
/uprightcode/js/Main_Javascript.js
You need to load jquery. Add this in HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.
I have and index.html file where I have headers for bootstrap tabs and iframe with tabs content.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function switchTabInIframe(tab) {
var tabId = $('#iframe_1').contents().find('#1');
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
};
</script>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab" onclick="switchTabInIframe('1')" ;>1</a>
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1"></iframe>
</div>
</body>
</html>
Below iframe.html where I have content(body) of the tabs:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="tab-content">
<div class="tab-pane active" id="1">
<h3>tab1</h3>
</div>
<div class="tab-pane" id="2">
<h3>tab2</h3>
</div>
<div class="tab-pane" id="3">
<h3>tab3</h3>
</div>
</div>
</body>
</html>
When clicking a tab in the index file how do I change it content that resides inside the iframe? The code above doesn't work... There is no error in the console... Thx
You will need create and invoke a function that is in your iframe page. The scope in your index page is not the same as the iframe, to switch the tabs. I suggest this update..
In the Index page, create a new function called switchframe(id) and call this from your onclick
function switchframe(id) {
document.getElementsByName('iframe_1').contentWindow.switchTabInIframe(id);
}
in iframe.html
function switchTabInIframe(tab) {
console.log('I can run');
console.log(tab);
//perform your tab switch now.
};
Please let us know the outcome..
Here in an example that might help you. When you click a tag, it runs a function that then changes the attr src in the iframe depending on what tab is clicked. This is using JQuery.
function switchTabInIframe(whichOne) {
var iframesource = "";
if (whichOne == 1) {
iframesource = "http://google.com";
} else if (whichOne == 2) {
iframesource = "http://matthewbergwall.com";
} else if (whichOne == 3) {
iframesource = "http://stackoverflow.com";
}
$("#ciframe").attr("src", iframesource);
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function switchTabInIframe(tab) {
var tabId = $('#iframe_1').contents().find('#1');
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
};
</script>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab" onclick="switchTabInIframe(1)" ;>1</a>
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1" id="ciframe"></iframe>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a two page (1 file) jQuery mobile page and I want to write some dynamic text on the second page as soon as it loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="js/universal-lotto.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true" id=menu>
<li data-role="list-divider" role="heading">Menu</li>
<li data-theme="c">Help</li>
</ul>
</div>
</div>
<div data-role="page" data-control-title="AnotherPage" id="ViewN" data-back-btn-text="Menu" data-add-back-btn="true">
<div data-role="content">
<div data-controltype="htmlblock" id=printhere>
</div>
</div>
</div>
</body>
</html>
How can I modify the #printhere div? In the file universal-lotto.js I have the following function:
$(document).on('pageshow', '#ViewN' ,function(){
alert('hi');
$('#printhere').html('printthis');
});
The alert comes up when the second page shows but the page itself remains blank.
your lign is invalid here :
<div data-controltype="htmlblock" id=printhere>
</div>
It should be :
<div data-controltype="htmlblock" id="printhere">
</div>
I've a problem with prettyphoto and a simple jquery script in a PrettyPhoto inline box.
Why I can't hide the div in this prettyphoto box? I don't understand why this is not working...
<!DOCTYPE html>
<html>
<head>
<title>Pretty photo test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje" style="display:block">this is a test</div>
<a onclick="$('#testje').hide(); return false">Close test div</a>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
No need to add [inline] :
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje">this is a test</div>
<a onclick="$('#testje').hide(); return false;">Close test div</a>
</div>