Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have tried Google for an answer to this and others have looked at my work but we can't understand what is wrong here ......? My HTML displays correctly but my Javascript does not run? I am new to Javascript so please explain things simply! My Javascript is in a separate stylesheet from my HTML.
var name;
document.getElementById("changeName").onclick = newName;
function newName() {
name = prompt("What is your name?");
updateName();
}
function updateName() {
document.getElementById("myName").innerHTML = name;
}
var item1;
var item2;
var item3;
document.getElementById("changeList").onclick = newList;
function newList() {
item1 = prompt("Enter a new first thing: ");
item2 = prompt("Enter a new second thing: ");
item3 = prompt("Enter a new third thing: ");
updateList();
}
function updateList() {
document.getElementById("firstThing").innerHTML = item1;
document.getElementById("secondThing").innerHTML = item2;
document.getElementById("thirdThing").innerHTML = item3;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
<style type="text/javascript" src="JS/javascript.js"></style>
</head>
<body>
<h1 id="myName">Elizabeth</h1>
<button id="changeName" type="button">Add Your Name</button>
<hr>
<p id="aboutMe">I'm learning to build dynamic pages with JavaScript and HTML!</p>
<hr>
<h1>Things I Like</h1>
<p>Here are some of the things I like to do:</p>
<ol>
<li id="firstThing">Write JavaScript</li>
<li id="secondThing">Travel the world</li>
<li id="thirdThing">See my friends</li>
</ol>
<button id="changeList" type="button">Change Your List</button>
</body>
</html>
JavaScript doesn't go in "stylesheets". It goes in script files.
This:
<style type="text/javascript" src="JS/javascript.js"></style>
is wrong. Instead you want this:
<script src="JS/javascript.js"></script>
Your code works, but javascript it's not stylesheet, that's CSS.
Change this:
<style type="text/javascript" src="JS/javascript.js"></style>
With this:
<script type="text/javascript" src="JS/javascript.js"></script>
And it works.
Once you fix the <style>/<script> error...
Web pages are loaded top down. So what happens is your JavaScript is loaded and run first. In the second line of your JavaScript you try to get an HTML element.
The problem is the HTML element doesn't exist yet because the web browser hasn't loaded/rendered the HTML yet.
This will not work:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
<script>
var dingo = document.getElementById("dingo")
// this will not work because the HTML hasn't finished loading and rendering so the DIV doesn't exist yet
</script>
</head>
<body>
<div id="dingo">ate my baby</div>
</body>
</html>
This will work:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
</head>
<body>
<div id="dingo">ate my baby</div>
<script>
var dingo = document.getElementById("dingo")
// this will work
</script>
</body>
</html>
Related
I am learning to create an element dynamically in an html page using javascript. In this code I am trying to create a simple "h6" inside "div-1".
<!DOCTYPE html>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1"></div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText("Dynamically added text.")
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
</html>
there are two mistakes in your code
the first is that you used wrong "id" name div-1 instead of div1
also, innerText isn't a function
this is the code after the fix :)
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement() {
var elem = document.createElement("h6");
elem.innerText = "Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText= "Dynamically added text.";
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
Set the text content of a node: node.innerText = text
function constructElement(){
var elem = document.createElement("h6");
elem.innerText ="Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
This is directly not your answer but the algorithm is very similar
https://stackoverflow.com/a/56489422/10941112
(For the part of modals please put your own elements)
In case you need further clarification feel free to ask as this is not your direct answer
Also sorry to say but the question is a duplicate of -
Dynamically creating HTML elements using Javascript?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Im not sure what to search on google but here is what Im trying to do..
Currently this is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Code weight convertor</title>
<link type="text/css" rel="stylesheet" href="styling.css">
</head>
<body>
<input type="text" placeholder="Product Code" class="pcode">
<button class="btn=find"><i class="x"></i>Find</button>
<div class="res" id="res1">Result1</div>
<script src="app.js"></script>
</body>
</html>
Where it says result1 id like that to change to whatever has been inputted in the text field provided after button been clicked on.
Lets say...
I have enetered 123 into the text field. Click Find, the result1 now changes to 123.
Im not sure where to start with this one, have already looked into google for readings, but couldn't find anything useful.
You need to add a click event listener to button element. When button is clicked, get the value from the input field and display it in the result div element
const btn = document.querySelector('.btn-find');
const inputField = document.querySelector('.pcode');
const result = document.querySelector('.res');
btn.addEventListener('click', () => {
if (inputField.value !== '') {
result.textContent = inputField.value;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Code weight convertor</title>
<link type="text/css" rel="stylesheet" href="styling.css">
</head>
<body>
<input type="text" placeholder="Product Code" class="pcode">
<button class="btn-find"><i class="x"></i>Find</button>
<div class="res" id="res1">Result1</div>
<script src="app.js"></script>
</body>
</html>
You'll need to add a class to your input:
<input id="myText" type="text" placeholder="Product Code" class="pcode">
and some JavaScript:
<script type="text/javascript">
function myFunction() {
document.getElementById("res1").innerHTML = document.getElementById("myText").value;
}
</script>
In-case you use jquery, you can do like this.
<input type="text" class="search__input">
<button>click</button>
$("button").click(event => {
let result = $(".search__input").val();
console.log(result);
});
you can do this, say the find button id is id="find"
$("#find").click(function(){
var inputdata = $(".pcode").val();
document.getElementById("res1").innerHTML = inputdata;
});
you can try this code. It will work.
I'm creating a website for a school project with different arrays of facts. I created multiple files with different JavaScript facts arrays and am trying to call them in the index.html file but I'm not sure how to call them without an a href tag. I've researched and most people say to try sourcing in the tag but nothing is printing.
This is my index.html code:
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="EllaFactsArray.html" type="text/javascript"></script>
</head>
<body>
<p>
Here is a fact about Ella:
</p>
<script>
getEllaFact();
</script>
</body>
</html>
This is my facts array (EllaFactsArray.html):
<html>
<title>Ella Facts</title>
<head>
<script type="text/javascript">
function getEllaFact()
{
Ella = new Array(6);
Ella[0] = "Ella had a six decade long career.";
Ella[1] = "";
Ella[2] = "";
Ella[3] = "";
Ella[4] = "";
Ella[5] = "";
i = Math.floor(Math.random() * Ella.length);
document.write("<dt>" + Ella[i] + "\n");
}
</script>
</head>
<body>
<script type="text/javascript">
getEllaFact();
</script>
</body>
</html>
The script needs to reference a JavaScript file, not an HTML file containing a function. Move the function into its own file and include it in the pages as needed.
<script src="EllaFactsArray.js" type="text/javascript"></script>
https://www.w3schools.com/js/DEFAULT.asp
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
I am new to javascript programming.
When i try to run this code, the default image in html tags shows up.
I used the setAttribute function but it doesn't work. Please Help!
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
</script>
</head>
<body>
<img src="awesomesite.gif" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
</body>
</html>
either move the script to the bottom of your page or add the following to your script
document.onload(function()
{
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<img src="http://i.stack.imgur.com/xkF9Q.jpg" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
<script>
window.onload = function () {
var logo = document.getElementById('image');
logo.src = "http://www.w3schools.com/html/pic_mountain.jpg";
};
</script>
</body>
</html>
I have a paragraph that I'd like to delete the contents of.
document.getElementById(id).innerHTML = "";
doesn't seem to be working. Does anyone have a better solution?
Here's an example
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("p").innerHTML = "";
</script>
</head>
<body>
<p id="p">
words
</p>
</body>
</html>
but the words in the paragraph are not removed. Thanks in advance to anyone that can help.
<!DOCTYPE html>
<html>
<head>
<!-- here the p tag doesn't exist yet -->
<script>
document.getElementById("p").innerHTML = "";
</script>
</head>
<body>
<p id="p">
words
</p>
<!-- however here it does exist -->
</body>
</html>
how to fix it ?
// only use this if you can't move your javascript at the bottom
window.onload = function() {
document.getElementById("p").innerHTML = "";
}
or move your javascript at the end of the page (this is the preferred one as javascript should always be loaded at the end of the page)
<!DOCTYPE html>
<html>
<head>
<!-- here the p tag doesn't exist yet -->
</head>
<body>
<p id="p">
words
</p>
<!-- however here it does exist -->
<script>
document.getElementById("p").innerHTML = "";
</script>
</body>
</html>
Be aware you use something that's not in W3C spec... (removing by innerHTML='')
var elem = document.getElementById(id);
if (!elem) {
console.log("No element for id:"+id);
} else {
elem.innerHTML="";
console.log("Should work");
}
Make it a function and add with the body onload event it should work:
<script>
function empty(){
document.getElementById("p").innerHTML = "";
}
</script>
<body onload='empty()'>
<p id="p">
words
</p>
</body>
I have often use jQuery for this function but, since you are seeking for pure javascript syntax. you will want to use this code:
document.getElementById("p").remove();
function funboi()
{
document.getElementById("p").innerHTML = "";
}
<!-- Just add a button. Works fine-->
<p id="p">
words are amazing
</p>
<button onclick="funboi()">click to delete</button>