I am new to JS and learning from a JAVASCRIPT and JQUERY book by JON DUCKETT.
I was struck at a problem regarding the document.title usage
I wrote a code on how to use document objects.
Every property and methods are working except for the title
I attached a code please have a look and help me how to get the title
property working.
The code is as following :
<!DOCTYPE html>
<html>
<head>
<title>Hammer</title>
</head>
<body>
<h1>THANOS</h1>
<div id="tony"></div>
</body>
<script>
var lord = "<p> The title of the page is :" + document.title + "</p>";
lord += "<p>address of the page is : " + document.URL + "</p>";
lord += " <p>Last modified is : " + document.lastModified + "</p>";
var man = document.getElementById("tony");
man.innerHTML = lord;
</script>
</html>
output:
THANOS
The title of the page is :
address of the page is : https://fiddle.jshell.net/_display/
Last modified is : 07/14/2018 10:28:57
title not displaying why?
And what is the meaning of the += in the code please help
Sorry I don't have the reputation of 10 to post an image I had to write this code.
Your code is actually working. See it live by hitting the Run the code button below:
var lord = "<p> The title of the page is :" + document.title + "</p>";
lord += "<p>address of the page is : " + document.URL + "</p>";
lord += " <p>Last modified is : " + document.lastModified + "</p>";
var man = document.getElementById("tony");
man.innerHTML = lord;
<!DOCTYPE html>
<html>
<head>
<title>Hammer</title>
</head>
<body>
<h1>THANOS</h1>
<div id="tony"></div>
</body>
</html>
And, when we write something like a += b in any programming language (not just JavaScript), it is simply a shorthand to write a = a + b. Nothing more, nothing Less. :)
your code is on, it is just jsfiddle is setting the title to nothing.
see jsbin
http://jsbin.com/yorivec/edit?html,output
<!DOCTYPE html>
<html>
<head>
<title>Hammer</title>
</head>
<body>
<h1>THANOS</h1>
<div id="tony"></div>
</body>
<script>
var lord = "<p> The title of the page is :" + document.title + "</p>";
lord += "<p>address of the page is : " + document.URL + "</p>";
lord += " <p>Last modified is : " + document.lastModified + "</p>";
var man = document.getElementById("tony");
man.innerHTML = lord;
</script>
</html>
plz check all code
given bello
<!DOCTYPE html>
<html>
<head>
<title>Hammer</title>
<script>
function myFunction() {
var d = new Date();
document.getElementById("time").innerHTML="last update:"+d;
document.getElementById("url").innerHTML="url:"+window.location.href+".....current page....."+window.location.pathname+".........websitename......"+window.location.hostname;
document.getElementById("title").innerHTML="Title:"+document.title;
}
</script>
<style>
body {
font-family: Calibri, sans-serif;
font-size:15px;
line-height:1.5;
padding:0;
margin:0;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1 id="title">This is a Headhing</h1>
<p id="url">This is a paragraph.</p>
<p id="time">This is a paragraph.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Related
I don't understand why innerHtml shows the good result in the console, but does not display anything in the html page :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="button" value="test" onclick="testClick();"></input>
<p id="score2"></p>
<script>
var score = 0;
function testClick() {
score++;
document.getElementById("score2").innerHtml = score; //does not display anything
console.log("inner : " + document.getElementById("score2").innerHtml); //works
}
</script>
</body>
</html>
var score = 0;
function testClick(){
score++;
document.getElementById("score2").innerHTML = score;
}
<input type="button" value="test" onclick="testClick();"></input>
<p id="score2"></p>
Here is the updated snippet for your code. your are doing a syntax mistake "innerHTML" is correct while "innerHtml" in incorrect
I am trying to make a Sign Up and Log In html. If user inputs data on SignUp.html, it will save as localStorage and if the data inputted on LogIn.html is not equal to the data inputteed in SignUp.html, it will not confirm. But somehow there is something wrong with the function.
Can someone please help me? I am still new to js
Here is SignUp.html
<!DOCTYPE html>
<html>
<head>
<script src = "JS.js"></script>
</head>
<body>
<form>
<input id="usernameS"></input>
<button onclick="confirmInput()" type="button">SignUp</button>
</form>
</body>
</html>
and LogIn.html
<!DOCTYPE html>
<html>
<head>
<script src = "JS.js"></script>
</head>
<body>
<form>
<input id="usernameL"></input>
<button onclick="LogInput()" type="button">LogIn</button>
</form>
</body>
</html>
Here is the js
var x = "document.getElementById('usernameS')";
localStorage.setItem("usernameS", x);
var y = "document.getElementById('usernameL')";
localStorage.setItem("usernameL", y);
function confirmInput() {
alert("Welcome " + usernameS.value + ". You are now registered.");
window.location.replace('LogIn.html'); }
function LogInput(x,y) {
if (x==y)
{unsernameS = document.forms[0].usernameL.value;
alert("Welcome " + usernameL.value + "! You just logged in.");}
else if (x!=y)
alert("Username not recognized");}
At least Fix typo in your code {unsernameS = document.forms[0].usernameL.value;
Instead of PHP, I want to use jQuery to get user input and pass in a function and update a "div".
My HTML(includes scripts) code is:
<head>
<title>Mobile Locale test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Mobile Locale this is!" />
<script>
var x;
$(document).ready(function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
console.log(x);
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
What I want:
I want to get input from user and assign that input to x.
Then I want to complete a string and pass x in that string.
Then I want to write that complete sentence in div id="test".
I am stumbling this for more than 6 hours but got no success. Tried numerous codes but failed.
Referred w3schools jQuery form example but they are using form method="abcd.asp".
Thanks in advance...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var x;
$(document).ready(function()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
function CallSubmit()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
return false;
}
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit" onclick="return CallSubmit();">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
</html>
Your script is executed on page load, when the input is empty - call the code on an event, like keyup
$(document).ready(function(){
$("#q").keyup(function() {
var name = "Hello " + this.value + ". Welcome to this site";
$("#test").text(name);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
You could get the name in the click event of the button.
Working example : http://jsfiddle.net/jjjoeupp/
$('#submit').on('click', function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
Hope it helps!!!
You can bind the focusoutevent with the input to dynamically change the div. Another approach would be to update on each keypress.
$(document).ready(function () {
$('#q').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).val() != '') {
var x = $(this).val();
var name = "Your string " + x;
}
$('#test').text(name);
}
});
});
fiddle : http://jsfiddle.net/86evwkbx/
I am new to javacript. I used an API for implementing custom search feature. But in my search page results show only after I enter the first search key. If I enter another search key, the results for the second key don't show up until I refresh the page.
How can I get the results to auto-update when entering more characters into the search box?
HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jsonData.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function display() {
document.location = "contentpage.html";
}
$(document).ready(function () {
$("#submit").click(searchAPI);
});
</script>
</head>
<body>
<input type="text" id="search1" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" >
<p id="desc"> </p>
<p></p>
</div>
</body>
</html>
My JS Code:
function searchAPI(){
var key= $("#search1").val();
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=' + key + ' &format=json&pretty=1&callback=?', function(data) {
var htmlContent = '<ul>';
for (var i = 0; i < data.RelatedTopics.length; i++) {
var desc = data.RelatedTopics[i].Text;
var url = data.RelatedTopics[i].Icon.URL;
var link = data.RelatedTopics[i].FirstURL;
document.getElementById('link').href = link;
var y = document.getElementById("link");
y.innerHTML = link;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:block'/> " +
"<p id='desc'>" + desc + "</p>" + "<a target='_blank' id='link' href=" + link + " >go to website</a></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}
Can anyone help me to solve this issue...Thanks in advance.
I'm a newbie programmer and i've been reading the Instagram search tutorial over at EduVoyage (http://eduvoyage.com/instagram-search-app.html). Impressed by this, i've decided to try my hand at it to learn jquery and such. Problem is, I cant get his example to work. I've dumbed my app down and can get it to display the default "cat" search, but when i search on the web form, i get nothing. No errors, no results, nothing. I'm banging my head here trying to find out what I'm doing incorrectly. i know its probably something simple im missing, but any help is greatly appreciated.
Here is js code:
var Instagram = {};
(function () {
function toScreen(photos) {
$.each(photos.data, function (index, photo) {
photo = "<div class='photo'>" +
"<a href='" + photo.link + "' target='_blank'>" +
"<img class='main' src='" + photo.images.low_resolution.url + "' width='250' height='250' />" +
"</a>" +
"<img class='avatar' width='40' height='40' src='" + photo.user.profile_picture + "' />" +
"<span class='heart'><strong>" + photo.likes.count + "</strong></span>" +
"</div>";
$('div#photos-wrap').prepend(photo);
});
}
function search(tag) {
var url = "https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&client_id=XXXXXXXXXXXXXXXXXX"
$.getJSON(url, toScreen);
}
$(function () {
$('form#search button').click(function () {
var tag = $('input.search-tag').val();
Instagram.search(tag);
});
Instagram.search('cats');
});
Instagram.search = search;
})();
and the HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' charset='utf-8'></script><script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script>
<link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='photos-wrap'>
<form id='search'>
<button type='submit' id='search-button' tabindex='2'>
<span class='button-content'>Search</span>
</button>
<div class='search-wrap'>
<input class='search-tag' type='text' tabindex='1' />
</div>
</form>
</div>
</body>
</html>