I made an HTML document with a button that when I click were to it display a prompt that modify a p tag.
Probably, I made a dumb error of code syntax(I am beginner in js).
Help me and explain please.
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href='calendar.css'/>
<script type="text/javascript">
function name(x){
var x = prompt("Enter the month name","Ex. January");
document.getElementById("month_name").innerHTML = x;
}
</script>
<title>:)</title>
</head>
<body>
<div class="title_Month">
<button onclick="name()" class="title" >Change the month displayed</button>
<p id="month_name"></p>
</div>
</body>
</html>
name is reserved in javascript.
You should avoid using the name of JavaScript built-in objects, properties, and methods
https://www.w3schools.com/js/js_reserved.asp
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href='calendar.css'/>
<script type="text/javascript">
function names(){
var x = prompt("Enter the month name","Ex. January");
document.getElementById("month_name").innerHTML = x;
}
</script>
<title>:)</title>
</head>
<body>
<div class="title_Month">
<button onclick="names()" class="title" >Change the month displayed</button>
<p id="month_name"></p>
</div>
</body>
</html>
Related
I am trying to get an HTML element from 2 different html files. The problem is I only get one of them.
var message1 = document.getElementById("message1") works.
But when I try to do the same for the element in the other html page:
var message2 = document.getElementById("message2") it returns null
I have a main html file (index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id = "message1">I hate the post office</p>
<script src="script.js"></script>
</body>
</html>
And I also have another html file (page2.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id = "message2">Random sentence</p>
<script src="script.js"></script>
</body>
</html>
And finally I have a javascript file (script.js):
//Gets message1 from index.html (works)
var message1 = document.getElementById("message1")
//logs message1 from index.html (works)
console.log(message1)
//gets message2 from page2.html (doesn't work)
var message2 = document.getElementById("message2")
//logs message2 from page2.html (logs null)
console.log(message2)
How do I get the elements of id message and message2 in script.js?
I try this another way using iframe. Add in index.html page
<p id="message">I hate the post office</p>
<iframe src="page2.html" frameborder="0" style="display: none;"></iframe>
<script src="script.js"></script>
I wanted save value in inputbox to JS variable, but when i save it, doesn't appear in console, why? thanks for advice
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Color Picker</title>
<link href="color-picker.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
</head>
<body>
<p><input type="text"></p>
<script src="color-picker.min.js"></script>
<script>
var picker = new CP(document.querySelector('input'));
picker.on("change", function(color) {
this.target.value = '#' + color;
})
function colorpick() {
var el = document.querySelector('input');
console.log(el);
}
</script>
<input onclick="colorpick()" type="button" class="button" value="Submit">
</body>
</html>
I am not sure what are you trying to accomplish but colorpick function is only selector of the input element itself. You need console.log(el.value) instead.
To insert HTML code using javascript dynamically, we use innerHTML after a tag is selected. Simple, but for me is not working. I've seen some links on SO and internet to do that.
My code is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css"/>
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much){
for(var i=0; i < how_much; i++){
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHtml = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much"/>
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)"/>
<div id="my_container"></div>
</body>
</html>
When I press the button, nothing occurs. Dynamic content isn't added on the page. I tested on Firefox and Chrome. Even the simplest div_cont.innerHtml = 'asdasd' won't work.
This code is so simple but isn't working. Is there a specific reason for this behavior?
Pay attention to your capitalization of .innerHTML:
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
It should be div_cont.innerHTML = 'asdasd'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css" />
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much) {
for (var i = 0; i < how_much; i++) {
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much" />
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)" />
<div id="my_container"></div>
</body>
</html>
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
I am new to qunit.I am running simple testcase in qunit.but nothing is getting displayed on screen.
This is HTML Runner:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
This is MyJsSourceCode.js
var ArthimeticOperations = {
addTwoNumbers : function (number1, number2) {
return number1 + number2;
}
}
This is MyJsUnitTests.js
test('Addition Test', function () {
strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality");
});
Try swapping the source code and test code includes... my guess is that your tests start running before the source code is included in the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<!-- SWAP THESE TWO...
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
Like so:
-->
<script src="MyJsSourceCode.js"></script>
<script src="MyJsUnitTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>