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 8 years ago.
Improve this question
I'm following a tutorial online on how to make a to do list, found here:
https://www.youtube.com/watch?v=MURDw0-BiEE
I've following it pretty closely, but it won't work. Browser states the appendChild is null. The tutorial is 2 years old, could a part of the code be outdated? I had it sending alerts through the button, but when I changed to the appendChild things stopped working.
I'm pretty new to this and really appreciate the help.
function addNewItem() {
var listItem = document.createElement("li");
listItem.innerText = "Hello";
list.appendChild(listItem);
}
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
addNewItem(document.getElementById("todoList"));
};
And here's the related part of the HTML:
<p><button id="btnAdd">New Item</button></p>
<ul id="todolist">
</ul>
<script src="todo.js"></script>
</body>
You have defined your function without arguments and then you try to pass one :
function addNewItem(list) {}
P.S. : You also tried to getElementById todoList instead of todolist, so it also gave you error :
addNewItem(document.getElementById("todolist"));
JSFiddle
You've missed function parameter, list:
function addNewItem(list) {
var listItem = document.createElement("li");
listItem.innerText = "Hello";
list.appendChild(listItem);
}
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
addNewItem(document.getElementById("todoList"));
};
You are passing a parameter to the function addNewItem() with addNewItem(document.getElementById("todoList")), but you aren't declaring this parameter in your function. So the variable list becomes null and appendChild() does not work. So change your first line:
function addNewItem() {
to
function addNewItem(list) {
and it will work.
Related
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 4 years ago.
Improve this question
I am new in javascript i want to add a javascript variable in
i use some javascript like this but it not working
HTML
<ul id="direction"></ul>`
JS
var abc = 'link/';
var cba = 'hello';
document.getElementById('directions').innerHTML = 'Link';`
This code should work, make sure the html id matches the getElementById and use the right quotes as mentioned before.
You want to add a href to a list but you should add a li first, in my example I use a div tag.
var name = 'google';
var ext = '.com';
document.getElementById('direction').innerHTML = 'Link';
A better way to do this would be by using backticks `` < these like so:
var name = 'google';
var ext = '.com';
var link = 'Link';
document.getElementById('direction').innerHTML = `${link}`;
Your code, fixed ID, and quotes:
document.getElementById("direction").innerHTML='Link'
Or maybe better:
var node=document.createElement("A")
node.setAttribute("href","https://"+var1+var2)
document.getElementById("direction").appendChild(node)
I hope that this will help you!
I'd recommend avoiding using innerHTML in most cases! The following accomplishes what you want programmatically without needing to generate HTML strings:
window.onload = () => {
let abc = 'link/';
let cba = 'hello';
let container = document.getElementById('direction');
let link = container.appendChild(document.createElement('a'));
link.setAttribute('href', `https://${abc}${cba}`);
link.appendChild(document.createTextNode('Link'));
};
<ul id="direction"></ul>
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 4 years ago.
Improve this question
<body>
<h1>Operadores aritméticos</h1>
<h3>+ Adición (102+103)=</h3><p id="suma1"></p>
<h3>- Substracción</h3><p id="resta1"></p>
<h3>* Multiplicación</h3><p id="multi1"></p>
<h3>/ División</h3><p id="div1"></p>
<h3>% Módulo</h3><p id="mod1"></p>
<script>
var suma = (102+103);
var resta = (36-20);
var multiplicación = (27*30);
var división = (900/30);
var módulo = (106%3);
document.getElementById("suma1").innerHTML = suma;
document.getElementById("resta1")innerHTML = resta;
document.getElementById("multi1")innerHTML = multiplicación;
document.getElementById("div1")innerHTML = división;
document.getElementById("mod1")innerHTML = módulo;
</script>
Hello guys, I have a problem, im pretty new at this (programming with HTML, Js, etc.).The issue is that when I try to make my Js variables appear on HTML (with document.getElementById), they do not appear. Nevertheless, if erase every document.getElementById except the one containing "suma1", the browser displays me the result of the sum (205), but if I add even one of them, the browser doesn´t display anything.
I hope I was clear with my problem, it seems very simple but hard to explain.
Any suggestions?
Thanks in advance
The reason you're not seeing anything when you add the statements to populate resta1, multi1, div1, and mod1 is probably because they all have a syntax error. This is likely causing even the first statement (suma1, which is syntactically valid) not to work.
Valid Statement
The 1 statement that is working is document.getElementById("suma1").innerHTML = suma;
Invalid statements
All the other statements follow this pattern:
document.getElementById("id")innerHtml = variable;
Note that you're missing the . between getElementById("id") and innerHtml. If you add the missing . then it should all work as expected.
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'm writing a simple jquery code to animation an element on my page:
curent
$('#tgs-nav-icon').on('click', function() {
var $nav = (".canvas-menu-content");
var bounceInRight = "bounceInRight animated";
if(! $nav.hasClass(bounceInRight) ) {
$nav.addClass(bounceInRight);
}
else {
$nav.removeClass(bounceInRight);
}
});
Uncaught TypeError: nav.hasclass is not a function
I tried testing this to see where I went wrong and this code comes back false as it should:
var help = $( ".canvas-menu-content" );
console.log(help.hasClass("foo"));
I can't figure out why the if statement is throwing me the error.
I've tried doing some research, but none of the previous questions seem to answer my issue.
You're assigning $nav to the string ".canvas-menu-content" here:
var $nav = (".canvas-menu-content"); // $nav is now '.canvas-menu-content'
Assign it to a jQuery object instead:
var $nav = $(".canvas-menu-content"); // $nav is now a jQuery object containing all
// elements with class canvas-menu-content
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
Sorry im new to jquery I usually use php/html. Can you tell why my code wont console log the VAR values. I am building an array from my vars when looping through them. I get the error Uncaught ReferenceError: $ is not defined.
Fiddle
var string1 = "tes£$%t";
var string2 = "test";
var string3 = "test";
var string4 = "test";
var check_fields = [string1, string2, string3, string4];
$.each(check_fields, function(index, value) {
if (value.replace(/^[a-z\d\-_\s]+$/i, "") != string) {
console.log(value);
}
});
Your code is fine but jquery file is missing here.
Fiddle link:- In the left side under the external resource just put the jquery cdn path and click on run then check.
https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
This will resolve your problem.
include the jquery header file in the head your html code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
Your html file is missing the external jQuery library.
Try adding this to the start of your html file (preferably in the head, of in the case of JSFiddle just paste it into the HTML box):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Let me know if this works
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 8 years ago.
Improve this question
There seems to be a lot of these errors on SO but I can't find any to relate to.
The error is: SyntaxError: missing : after property id and it's complaining about this line: var msg = ""; (Line 3).
function checkSubmission()({
var msg = "";
$('#validation').html(msg);
if ($("#lms_name").val().length<=0){
msg+="LMS Name Required.<br/>";
}else{
var value = $('#lms_name').val();
var regex = new RegExp(/^[a-zA-Z0-9 ]{2,}$/);
if(value.match(regex)) {
} else {
msg+="<b>Error on LMS name : </b>Numbers and letters only. Minimum of two characters.<br/>";
}
}
//lots more code here...
Any ideas? FYI I'm a complete newbie (for now...).
Thanks in advance!
The code in your comment on #Shoaib Raza, prompted me to post this. (please accept his answer rather than mine, since his was first.)
Quote OP Comment:
FYI, I changed it to just function checkSubmission( var msg = ""; ... and the error still appeared.
And that's totally wrong too. checkSubmission( ... is not what his answer is showing, so the new error message is accurate: SyntaxError: missing ( before { -> function checkSubmission{
This line of your original code contains the original syntax error...
function checkSubmission()({
should be this...
function checkSubmission() {
Notice the difference? You simply need to remove the extra ( and nothing else.
Change your function to :
function checkSubmission()
{
var msg = "";
$('#validation').html(msg);
if ($("#lms_name").val().length<=0)
{
msg+="LMS Name Required.<br/>";
}
else
{
var value = $('#lms_name').val();
var regex = new RegExp(/^[a-zA-Z0-9 ]{2,}$/);
if(value.match(regex))
{
}
else
{
msg+="<b>Error on LMS name : </b>Numbers and letters only. Minimum of two characters.<br/>";
}
}
//lot more code in the function here.. if any
}
Hope this helps.