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.
Related
I am making a basic online editing interface for coursework and i want to use keyboard events. The tab key should insert text, this works, but it should also reduce the size of the text on that line. When I use the getElementById, an error displays saying: Cannot read property 'style' of null. How do I go about this?
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList" id="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
You are missing you id as an attribute to your ul.
I am making a basic blackjack game with angularjs and using bootstrap for the layout however I cannot seem to make it work.
What I want is a heading across the top, the content of the game in the middle and left and a list of current players on the right but isn't everything is running down the page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackjack</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="./angular.js"></script>
<script src="./angular-animate.js"></script>
<script src="./angular-touch.js"></script>
<script src="./ui-bootstrap.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="main">
<div class = "row">
<div class="col-sm-12">
<h1>Black Jack</h1>
</div>
</div>
<div class="row">
<div class = "col-sm-10">
<div ng-include="'play.html'" my-replace>
</div>
<div ng-include="'next.html'" my-replace>
</div>
<div ng-include="'start.html'" my-replace> </div>
</div>
<div class="col-sm-2">
<ul class = "row">
<li class="col-sm-12">
<h2>Players</h2>
</li>
<li class = "col-sm-12" ng-repeat="player in players">
<span>{{player.name}}: <button ng-if="!started" ng-click='removePlayer(player)'>Remove</button></span>
</li>
</ul>
</div>
</div>
</div>
<!--
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> </script>
<script>
div = $("div");
(function add(div){
div.each(function(i, val){
this.innerHTML=this.nodeName+" open "+this.className+" "+this.innerHTML+" "+this . nodeName+" close"
add($(this).children());
})})(div);
</script>
-->
</body>
</html>
The my-replace directive strips away the wrapping div of the ng-includes once their content loads.
The js code at the bottom is a quick debugger so I can see how the html was being interpreted as firebug light doesn't work with angularjs.
I've tried with multiple versions of bootstrap too
Why isn't the bootstrap working?
I'm trying to learn Javascript and decided to try the innerHTML property myself. But the browser seems to ignore the Javascript code. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - Document Object Model </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul id="todo">
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li><li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
<script type="text/javascript">
var thirdItem = getElementById('three');
var itemContent = thirdItem.innerHTML;
thirdItem.innerHTML = '<li id="three" class="hot">chicken</li>';
</script>
</body>
</html>
Your code should be:
var thirdItem = document.getElementById('three');
...
thirdItem.innerHTML = 'chicken';
'You might not need jQuery' is a short reference of the JavaScript DOM routines vs. jQuery ones.
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>
<!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