This question already has answers here:
How does NextSibling work?
(2 answers)
Closed 4 years ago.
In this example, I want to get the value of 2 previous sibling
But this is not work btn.previousSibling.previousSibling.value
I need use 4 previousSibling to get the value, why 4?
<!DOCTYPE HTML>
<html>
<head>
<script>
function text(btn){
console.log(btn.previousSibling.previousSibling.previousSibling.previousSibling.value)
}
</script>
</head>
<body>
<textarea></textarea>
<br>
<button onclick="text(this)">text</button>
</body>
</html>
previousSibling points to the previous Node, which is new line (a TextNode) in your example. You might want to use previousElementSibling instead
function text(btn){
console.log(
btn
.previousElementSibling
.previousElementSibling
.value
);
}
<textarea>Hello</textarea>
<br>
<button onclick="text(this)">text</button>
It can be because of empty entries inserted by the browser :
https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling
this code works in your case :
<!DOCTYPE HTML>
<html>
<head>
<script>
function text(btn){
alert(btn.previousSibling.previousSibling.value);
}
</script>
</head>
<body>
<textarea>test text</textarea><br><button onclick="text(this)">text</button>
</body>
</html>
You can use JQuery $(btn).prev().prev();
Like :
<!DOCTYPE HTML>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
function text(btn){
alert($(btn).prev().prev().val());
}
</script>
</head>
<body>
<textarea>test text</textarea>
<br>
<button onclick="text(this)">text</button>
</body>
</html>
The reason is because of the br element.
You can get the parent using parentNode and queryselector to get the specific element.
function text(btn) {
var getText = btn.parentNode.querySelector('textarea').value;
console.log(getText.trim())
}
<textarea></textarea>
<br>
<button onclick="text(this)">text</button>
Related
This question already has answers here:
How to get a number value from an input field?
(4 answers)
Closed 5 months ago.
Here is my code
<html>
<head>
head
<title>title</title>
</head>
<script>
var val1 = parseInt(document.getElementById('input1'));
function bytton()
{
window.alert(val1);
}
</script>
<body>
<br>
<input type="number" id="input1"/>
<br>
<button type="button" onclick="bytton()">value of val1</button>
</body>
</html>
It runs properly without any problem.
At the input field i write a number in it and then click on the button but then it displays that the value is NaN,I think the value is not getting assigned to val1.
<html>
<head>
head
<title>title</title>
</head>
<script>
function bytton() {
window.alert(document.getElementById("input1").value);
}
</script>
<body>
<br>
<input type="number" id="input1"/>
<br>
<button type="button" onclick="bytton()">value of val1</button>
</body>
</html>
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
I am trying to add innerHtml of element named as P.I had added its attribute id which has value p1. And i had tried to changes it innerhtml while onclick of a button.But overall i am failed to do so. And i still have no idea why its not doing so.
<!DOCTYPE html>
<html>
<head>
<title>javascript </title>
</head>
<body>
<button onclick="myfunction()">click me</button>
<p id="new"> this my content added by manully</p>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("new").innerHtml="this is my first page";
function myfunction(){
//alert(1);
document.getElementById("p1").innerHtml="this is my first page";
//console.log();
}
</script>
</body>
</html>
I am following this example which is showing results successfully.Please have an eye on it.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
I was using wrong syntax of javascript function which is named as innerHTML but i was using it as innerHtml.
<!DOCTYPE html>
<html>
<head>
<title>javascript </title>
</head>
<body>
<button onclick="myfunction()">click me</button>
<p id="new"> this my content added by manully</p>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("new").innerHTML="this is my first page";
function myfunction(){
//alert(1);
document.getElementById("p1").innerHTML="this is my first page";
//console.log();
}
</script>
</body>
</html>
try this :
<script>
$(document).on('click', '#new', function () {
$(this).html('my msg');
})
</script>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I'm trying to use Document.getElementByClassName, but it isn't working. I've included my code below. I'd appreciate any help.
HTML document:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Day Practice</title>
<style></style>
</head>
<body>
<h1 class=myclass> Some text</h1>
</body>
</html>
JavaScript code:
var change = document.getElementByClassName("myclass");
change.innerHTML = "New text";
It's getElementsByClassName Elements
Returns an array-like object of all child elements which have all of the given class names
- Mozilla Developer Network / Document.getElementsByClassName()
Loop through it or use change[0].innerHTML
1
var change = document.getElementsByClassName("myclass");
change[0].innerHTML = "New text";
<h1 class="myclass"> Some text</h1>
2
var change = document.getElementsByClassName("myclass");
for (var i = 0; i < change.length; i++) {
change[i].innerHTML = "New text";
}
<h1 class="myclass"> Some text</h1>
Right before the closing body tag (), you want to add a script tag to attach your JavaScript file into the HTML file, so that they're both linked.
This is how it should look:
<head>
<meta charset=utf-8>
<title>Day Practice</title>
<style></style>
</head>
<body>
<h1 class=myclass> Some text</h1>
<script src="javascriptfile.js"></script>
</body>
Also, it's "getElementsByClassName"; elements is plural
i am a beginner to java script.i do the bellow code for changing the text color into red using java script.But it doesn't work.what is the error in my code?
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Remove innerHTML from var col=document.getElementById("demo").innerHTML;
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo");
col.style.color="#FF0000";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button below.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Dont use the innerHTML, it returns a String.
Use the style on the object itself.
Check out it working: JsFiddle
You can try this ...
document.getElementById('demo').style.color = '#FF0000';
Replace this code:
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
with this:
function display()
{
var col=document.getElementById("demo");
col.style.color="red";
}
Inner html would contain the html inside the demo tag, but you need to refer to the tag itself.
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
document.getElementById("demo").style.color="red";
}
</script>
</head>
<body>
<h1>Your Fixed JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Here's the fixed one I just made the change of the words turn red because it wasn't