I am learning basic js operation on DOM, and it works fine with the first part of the code, which completes attributes replacing function.
Then it doesn't work with the second part code, which needs to replace the null value of the childNode.nodeValue of the "p" element.
I checked lots of times in the past 2 hrs, and the whole structure is also the same with the code in the book, but it just won't work.
I also checked the MDN about the node related entries, but also failed to get what is going on here.
gallery.js
function showpics(indexs){
var linky = indexs.getAttribute("href");
var holdy = document.getElementById("holder");
holdy.setAttribute("src",linky);
var texty = indexs.getAttribute("title");
var fun = document.getElementById("funnyWords");
fun.childNodes[0].nodeValue = texty;
}
Below is the HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
<title>YTimes</title>
<script type="text/javascript" src="gallery.js"></script>
</head>
<body>
<h1>Our Story</h1>
<section>
<ul>
<li>F</li>
<li>2.0</li>
<li>Riverrun</li>
</ul>
</section>
<section>
<p id="funnyWords"></p>
<span>
<img src="" alt="" id="holder">
</span>
</section>
</body>
</html>
The problem is that #funnyWords has no content:
<p id="funnyWords"></p>
Therefore, fun.childNodes[0] is undefined.
You can create a new text node if necessary:
if(fun.childNodes.length)
fun.childNodes[0].nodeValue = texty;
else
fun.appendChild(document.createTextNode(texty));
Alternatively, new browsers support textContent:
fun.textContent = texty;
<head>
<meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
<title>YTimes</title>
<script type="text/javascript" src="gallery.js"></script>
</head>
<body>
<h1>Our Story</h1>
<section>
<ul>
<li>F</li>
<li>2.0</li>
<li>Riverrun</li>
</ul>
</section>
<section>
<p id="funnyWords">
<div class="childnode">
</div>
</p>
<span>
<img src="" alt="" id="holder">
</span>
</section>
</body>
Related
HTML & Javascript example with a hash tag in the URL. The script will locate an element with text of the value of the hash tag as there is no element with the corresponding ID attribute then scoll to that element. This works on Firefox.
Is there a reason it should not work on Chrome?
<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="UTF-8"><title>SO URL Hash Shim Example</title>
<script>
if (bare_hash = window.location.hash?.substring(1)){
window.onload = function(){
function get_element_by_content (bare_hash_a, tag_a){
return Array.from(document.getElementsByTagName(tag_a)).find(e_a=>e_a.innerText.includes(bare_hash_a));
}
get_element_by_content(bare_hash, "h1")?.parentNode.scrollIntoView();
}
}
</script>
</head>
<body>
<!-- 1 -->
<div>
<img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt='SO'>
<h1>Bob</h1>
<hr>
</div>
<!-- 2 -->
<div>
<img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt='SO'>
<h1>Larry</h1>
<hr>
</div>
<!-- ... -->
<!-- 9 -->
<div>
<img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt='SO'>
<h1>Steve</h1>
<hr>
</div>
</body></html>
This Javascript code is probably the error here:
var page1selector=document.getElementById('page1_selector');
var page1anchor=page1selector.document.getElementsByTagName('a');
var page2selector=document.getElementById('page2_selector');
var page2anchor=page2selector.document.getElementsByTagName('a');
var page2name="Who are we?";
var page1name="Home";
page2anchor[0].innerHTML=page2name;
page1anchor[0].innerHTML=page1name;
document.getElementById("menu_div").style.marginLeft = screen.width/2;
and the HTML is
<?php
?>
<html>
<head>
<meta charset="UTF-8">
<script src="mainjs.js"></script>
<link rel="stylesheet" href="maincss.css">
<title> Home </title>
</head>
<body>
<div id="menu_div" class="menu_div_class">
<ul id="menu">
<li id="page1_selector"><a id="ul_a" style="color:red;" href="index.php"></a></li>
<li id="page2_selector"><a id="ul_a" id="page2a" href="page2.php"></a></li>
</ul>
</div>
<div id="page_content">
<h1 id="page_content_h1">Welcome to Test D2E5</h1>
<p>This is a test project involving new types of information</p>
</div>
</body>
<footer>
</footer>
</html>
The problem is that it keeps telling me that page1selector and page2selector are null. Before I added page1selector, it worked.
When the button is pressed i would like for another div tag to appear on the screen for the user. I have tried and looked through many web pages to see what is going wrong. There is no error on the console for the webpage. Here is the HTML code and JavaScript code.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$("buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
<html>
<head>
<link rel="stylesheet" href="site.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<nav>
<p class="logo"> Logo! </p>
<ul id="ul01">
<li>NewsFeed</li>
<li>Discover</li>
<li>Following</li>
</ul>
<div class="logIn">
Login
Sign Up
</div>
</nav>
<a id="buttonId" href="#"> Click fo anouther div!!</a>
<div id=newDiv>
<div id=div01> Hello </div>
</div>
<script src="operations.js"></script>
</body>
</html>
$("buttonId") is a selector that won't match any element (as it searches for an element with a tag buttonId).
You should change it to $("#buttonId") for it to work.
There were some mistakes in your code.
$("buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
In the above code. # character is missing before buttonId. So it will not match anything. This is the corrected version
$("#buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
Also in your HTML, you have forgotten to place double quotes outside ids of newDiv and div01. Here is the corrected version
<html>
<head>
<link rel="stylesheet" href="site.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<nav>
<p class="logo"> Logo! </p>
<ul id="ul01">
<li>NewsFeed</li>
<li>Discover</li>
<li>Following</li>
</ul>
<div class="logIn">
Login
Sign Up
</div>
</nav>
<a id="buttonId" href="#"> Click fo anouther div!!</a>
<div id="newDiv">
<div id="div01"> Hello </div>
</div>
<script src="operations.js"></script>
</body>
</html>
It appears as though you're missing the '#' sign in front of your $('buttonId').
So it should be:
$("#buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
Cheers,
David
When you click on print note, I am expecting another window to pop-up with the notes you took. In my case, it keeps showing up blank.
Please let me know if I should provide more details:
Page(1) with the text area
<textarea id="sermon_notes" cols="5" rows="5"></textarea>
<span>Print Notes</span>
Page(2) with javascript trying to pull the information you wrote on page(1) so it can show up on page(2)
<html>
<head>
<title>Media | New Foundation Christian Ministries </title>
<link rel="stylesheet" href="../css/popout.css" media="screen" type="text/css" />
<link rel="stylesheet" href="../css/print.css" media="print" type="text/css" />
</head>
<body class="about">
<div class="wrap">
<div class="header">
<span>Print</span>
<h1><img src="../images/logo.png" alt="New Foundation Christian Ministries" /> </h1>
</div>
<div class="content">
<div class="page_header">
<h2>Notes</h2>
</div>
<h1></h1>
<h1>some text</h1>
<small>ate</small>
<br/><br/><br/>
<h3>My Notes:</h3>
<p>
<script type="text/javascript">
// Get the notes from the parent page
var message_notes = window.opener.document.getElementById('sermon_notes').value;
// Replace out the new line character with a <br>
message_notes = message_notes.replace(new RegExp( "\\n", "g" ),"<br />");
document.write(message_notes);
</script>
</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
I got it, my above code work just fine, is the fact my link did not contain the http but rather files. it would not work unless you have http, so it wont work on your local server.
Thank you all for helping.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace