Why I cannot set property innerhtml of null showing?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var scr1 = 0;
var scr2 = 0;
document.getElementById("demo").innerHtml= "Paragraph changed!";
document.getElementById("CS").innerHtml = "Your Score :"
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none"
setTimeout(function re(){
a.style.boxShadow = "-4px -4px grey"
},200)
}
</script>
</head>
<body>
<h2 class="scr1" id="dome">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
</body>
</html>
Please help me with this code
Inner HTML not working I can't find where is error so please help me
You have a few issues with your code:
innerHtml isn't a property, you instead need to use innerHTML
You are trying to target elements in your js code before they are loaded on the page (the DOM - Document Object Model, isn't ready yet). To overcome this you can call your code when your page has loaded. You can do this by using window.onload=init, where init is a function, which runs when the page has loaded.
Your targeting the id demo in your javascript but you do not have an element with the id demo in your HTML, you have the id dome so I'm assuming dome is supposed to say demo
Fixing all of these things will fix your issue.
See a working example bellow:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function init() {
var scr1 = 0;
var scr2 = 0;
document.getElementById("demo").innerHTML = "Paragraph changed!";
document.getElementById("CS").innerHTML = "Your Score :";
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none";
setTimeout(function re() {
a.style.boxShadow = "-4px -4px grey";
}, 200);
}
}
window.onload = init;
</script>
</head>
<body>
<h2 class="scr1" id="demo">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
</body>
</html>
Move your script tag to the bottom of page just below the body close tag .
Also you are referring to an element "dome", but in html you have element "demo", make them both the same
document.getElementById("demo").innerHTML = "Paragraph changed!";
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 class="scr1" id="dome">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
<script>
var scr1 = 0;
var scr2 = 0;
document.getElementById("dome").innerHTML = "Paragraph changed!";
document.getElementById("CS").innerHtml = "Your Score :"
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none"
setTimeout(function re() {
a.style.boxShadow = "-4px -4px grey"
}, 200)
}
</script>
</body>
</html>
Related
So I'm trying to create my own To Do list just to learn javascript and I'm stuck.
I've managed to add a new div with the input that the user writes, but there's no design.
<div class="isDo"> // HTML code
<p id="newTask">Task 1</p>
<hr>
</div>
function addTask() { // JavaScript Code
var div = document.createElement("div");
var taskAdd = document.getElementById("taskAdd").value;
div.innerHTML = taskAdd;
document.getElementsByClassName("isDo")[0].appendChild(div);
}
When I used append paragraph instead of div it the design works, but I want to ad an <hr> tag for each input value.
What way can I add an entire div with paragraph and hr tag?
This should do the trick :)
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="isDo">
<p id="newTask">Task 1</p>
<hr>
</div>
<button id="btn" >add a tag</button>
<script>
function addTask() { // JavaScript Code
var div = document.createElement("div");
var taskAdd = document.getElementById("newTask").innerHTML;
//change the id of the el because taskAdd doesn't point to an element
div.innerHTML = `<p>${taskAdd}</p><hr>`;
//this is the part where you add the text in taskAdd and the hr tag
document.getElementsByClassName("isDo")[0].appendChild(div);
}
var btn = document.getElementById("btn")
.addEventListener("click", addTask);
</script>
</body>
</html>
`
Try this below :
<!DOCTYPE html>
<html>
<title>Test Code</title>
<head>
<script>
function addTask() {
var div = document.createElement("div");
var taskAdd = document.getElementById("taskAdd").value;
div.innerHTML = taskAdd + "<hr>";
document.getElementsByClassName("isDo")[0].appendChild(div);
}
</script>
</head>
<body>
<input id="taskAdd">
<button onclick="addTask()">Add</button>
<div class="isDo">
<p id="newTask">Task 1</p>
<hr>
</div>
</body>
</html>
I'm totally lost as to where to begin here, how would I create a countdown button so that each time my button is clicked, it prints out the global variable and reduce it by 1 in the innerHTML and when it hits 0 it says BOOM?
I know I have to declare the variable outside but not sure what to do afterwards
JS:
var i = 20
function myFunction()
{
i = i--; // the value of i starting at 20
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task6.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>
I tryed this code and works fine
var i = 20;
function myFunction() {
myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if(i <= 0) {//with <=0 the user if click again,after zero he sees only BOOM
myData.textContent = "BOOM!"
}
}
html code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task6.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
var i = 20;
function myFunction() {
var myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if(i <= 0) {
myData.textContent = "BOOM!"
}
}
</script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>
It's good practice to not inline JS in the HTML so I'll provide an extra example to show how to separate it out using a couple of DOM selection methods:
let count = 20;
// grab the element with the mydata id
const mydata = document.getElementById('mydata');
// grab the button and attach an click event listener to it -
// when the button is clicked the `handleClick` function is called
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);
function handleClick() {
if (count === 0) {
mydata.textContent = 'Boom';
} else {
mydata.textContent = count;
}
count--;
}
<body>
<p id="mydata">Countdown</p>
<button>Click</button>
<script src="task6.js" type="text/javascript"></script>
</body>
Reference
getElementById
querySelector
addEventListener
I'll assume you want to show the variable output and the BOOM at the <p id="mydata"> Count Down </p>, if I am mistaken correct me. So, something like this:
let i = 20;
const myData = document.querySelector("#mydata");
function myFunction() {
i = i - 1;
myData.textContent = i;
if(i === 0) {
myData.textContent = "BOOM!"
}
}
You almost got it whole,only missed the textContent and if part. If this is what you wanted to achieve. If this isn't what you were looking for, hit me up so I can correct it. Cheers :)
You need some way of displaying the number inside of your variable. One of the simplist ways to do this would be to set text to your paragraph tag using getElementById() and inner HTML. For example, after running your deincrement, on the next line you would do something like...
function myFunction()
{
i = i--; // the value of i starting at 20
document.getElementById("mydata").innerHTML = i;
}
This code simply grabs your "mydata" paragraph from the DOM and injects the number into the tag as html.
Can anyone tell me how I can make the generated document pick up the data from the forms and put it as their title? I have already looked at the Google Script documentation and so far I have not found anything that can answer me or show me a similar example. Until now I have found relevant subjects and code here, but none have suited my need.
function doGet() {
return HtmlService
.createHtmlOutputFromFile('index')
}
function criarDocument(){
var doc = DocumentApp.create('Doc');
}
function criarSheet(){
var sheet = SpreadsheetApp.create('Sheet');
}
function createPresentation() {
var presentation =
Slides.Presentations.create({"title": "Presentation"});
Logger.log("Created presentation with ID: " + presentation.presentationId);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<title>CRIE</title>
<script>
function criarDocument(){
google.script.run.criarDocument();
}
function criarSheet(){
google.script.run.criarSheet();
}
function createPresentation(){
google.script.run.createPresentation();
}
function titulo(){
var st = document.getElementById('student').value;
var te = document.getElementById('teacher').value;
var wo = document.getelementById('work').value;
document.getElementById('student' + 'teacher' + 'work').value;
}
</script>
</head>
<body>
<h1><p align = "center">CRIE SEU ARQUIVO</p></h1>
<div>
<form id = 'form' onsubmit="titulo">
<h2><p align = "center"> Student:</p></h2><p align = "center">
<input type="text" name="estudante" id="student">
<h2><p align = "center">Teacher: </p></h2><p align = "center">
<input type="text" name="professor" id="teacher">
<h2><p align = "center">Work Name</p></h2><p align = "center">
<input type="text" name="trabalho" id="work">
<br><br>
<button class="action" value="Submit" onclick= 'criarDocument()'>Start Document </button>
<button class="action" value="Submit" onclick='criarSheet()'>Start Sheet</button>
<button class="action" value="Submit" onclick='createPresentation()'>Start Presentation</button>
</form>
</div>
</body>
</html>
Here's a simple example of a timestamped text input into a spreadsheet from a sidebar. Don't forget to name your sheet Notes.
Code.gs
function onOpen()
{
loadSideBar();
SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();
}
function dispText(txt)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getSheetByName('Notes');
var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
var row=[];
row.push(ts);
row.push(txt);
sht.appendRow(row);
return true;
}
function loadSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('sidebar');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
});
function sendText()
{
var txt=$('#txt1').val();
google.script.run
.withSuccessHandler(clearText)
.dispText(txt);
}
function clearText()
{
$('#txt1').val('');
}
console.log("My code");
</script>
</head>
<body>
<textarea id="txt1" rows="12" cols="35"></textarea><br />
<input id="btn1" type="button" value="submit" onClick="sendText();" />
</body>
</html>
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 have made a code in which on clicking computer Science button I get data from XML
<html>
<head>
<script src="loadxmldoc.js"></script>
</script>
</head>
<body>
<h1 style="text-align:center">DEPARTMENT DETAILS</h1>
<button onclick="myfunction()">Computer Science</button>
</br>
<script>
function myfunction(){
xmlDoc=loadXMLDoc("faculty.xml");
var x=xmlDoc.getElementsByTagName("computer")[0];
var y=x.childNodes;
for(i=0;i<y.length;i++)
document.write(y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>");
}
</script>
</body>
</html>
When I click on button I do get the data but a new page is loaded. I would like to have data below the button. How to do so?
document.write is archaic and useful only before the DOM has loaded. If it's used after that, it overwrites the current DOM, as you've discovered.
Use DOM methods instead and prepare a container to receive the content.
HTML:
<div id='container'></div>
JS:
var cntr = document.querySelector('#container'), html = '';
for (var i = 0; i < y.length; i++) {
html += y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>";
}
cntr.innerHTML = html;
Consider using this approach.
Basically load your xml data, and display the result in a div "result";
<html>
<head>
<script src="loadxmldoc.js"></script>
</script>
</head>
<body>
<h1 style="text-align:center">DEPARTMENT DETAILS</h1>
<button onclick="myfunction()">Computer Science</button>
</br>
<script>
function myfunction(){
xmlDoc=loadXMLDoc("faculty.xml");
var x=xmlDoc.getElementsByTagName("computer")[0];
var y=x.childNodes;
var result = document.getElementById('result');
for(i=0;i<y.length;i++)
result.innerHTML = ''; // always reset
result.innerHTML +='y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>"';
//document.write(y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>");
}
</script>
<div id="result"></div>
</body>
</html>