This question already has answers here:
getElementByClassName Not Returning Results
(2 answers)
Closed 9 years ago.
So, this is the code:
<a id="link" href="https://url.com/">URL:</a>
<input id="value"/>
<script type="text/javascript">
var link= document.getElementById('link');
var input= document.getElementById('value');
input.onchange=input.onkeyup= function() {
link.search= 'extendurl/'+encodeURIComponent(input.value);
};
</script>
this is working, but i need to use the class instead of the ID. I try this:
<script type="text/javascript">
var link= document.getElementByClassName("link")[0];
var input= document.getElementByClassName("value")[0];
input.onchange=input.onkeyup= function() {
link.search= 'extendurl/'+encodeURIComponent(input.value);
link.firstChild.data= link.href;
};
</script>
<a class="link" href="https://url.com/">URL:</a>
<input class="value"/>
i don't know why, but this isn't working.
Someone?
The precise name is important.
Change
getElementByClassName
to
getElementsByClassName
There's a s because there might be more than one element with a give class, contrary to elements with a specific id.
There can be many elements with the exact same class names, so you have to adjust it for that
instead of
getElementByClassName
you have to do
getElementsbyClassName("someclass");
and it will return an array of all of them
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I want to add a class with input tags Because there is a problem with my display (it not beautiful) And I have to Add this class by using javascript and my code is as follows But it doesn't work I'm not sure where I went wrong.
mychoices.html
<script>
document.addEventListener('DOMContentLoaded', function() {
new Choices('#choices-remove-button', {
removeItemButton: true,
});
var inputs = document.querySelectorAll('input[type=text]');
inputs.classList.addClass("browser-default");
});
</script>
myform.html
<div class="section">
<form action='.' method='POST'>
{% csrf_token %} {{ form.media }}
{{ form }}
<input type='submit' value='Save' class="button" />
</form>
</div>
Which I added classes browser-default and other existing classes must work correctly.
What should I do?
Thanks
So you're really close.
The first thing to note is that document.querySelectorAll returns a NodeList (like an array of elements). So you'll need to use forEach to loop over each input.
From MDN
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
The second thing is that the classList.addClass doesn't exist. It's just classList.add. For more about Element.classList, please refer to this MDN article: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Try the following instead:
<script>
document.addEventListener('DOMContentLoaded', function() {
new Choices('#choices-remove-button', {
removeItemButton: true,
});
var inputs = document.querySelectorAll('input[type=text]');
inputs.forEach(function (input) {
input.classList.add("browser-default");
})
});
</script>
X/Y problem "there is a problem with my display" - explain the problem instead of trying to fix a solution that might not be efficient or good practice. Also what is Choices ?
To answer your immediate question:
You are trying to add a class to a node list. That is jQuery syntax.
In vanilla JS, you need to use classList.add to each
document.querySelectorAll('input[type=text]').forEach(input => ;
input.classList.add("browser-default"));
or similar loop
This question already has an answer here:
How do I pass the value of a variable to an specific page element with solely JavaScript?
(1 answer)
Closed 4 years ago.
Would something like this be possible?
<head>
<script>
var movie="Tag";
var link=("google.com/"+movie);
</script>
<a href=(link)>Click Me</a>
</head>
Please Help Me
HTML does not work like a templating language. To do something like this, the source would look a bit more like this:
<body>
Click Me
<script>
var movie = "Tag";
var link = "http://google.com/"+movie;
document.getElementById('some-random-id').setAttribute('href', link);
</script>
</body>
The difference is that we first created the HTML, and afterwards are using javascript to replace the link.
It's also possible to use Javascript to write all the HTML, but this is probably the easiest way to get started.
You can, but it takes a bit of coding.
In this case, you need to specify the full url, including the schema.
Then I gave the link an id attribute so that the JavaScipt code could find it and update the href with the new url.
const movie="Tag";
const url= "https://google.com/"+movie;
const link = document.getElementById("test-link");
link.href = url;
<a id="test-link" href="#">Click Me</a>
This question already has answers here:
jQuery selector regular expressions
(10 answers)
Closed 4 years ago.
I want to get all elements that class contains a number, how can I do that?
I haven't tried anything because I don't really know how to think about it.
This might be related to this question: jQuery selector regular expressions
Using the regex functionality from this page, you should be able to do something like this:
$(':regex(class,.*[0-9].*)');
This can be done by iterating over all desired elements, keeping only those where the className attribute matches a given regex.
var divs = $('div');
var regex = /\d/;
var result = divs.filter(index => regex.test(divs[index].className));
result.each(index => console.log(result[index]));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="x1" class="a"></div>
<div id="x2" class="a1"></div>
<div id="x3" class="2a"></div>
<div id="x4" class="3"></div>
<div id="x5" class="bc"></div>
<div id="x6" class="x4y5z"></div>
This question already has answers here:
How do I get jQuery to select elements with a . (period) in their ID?
(8 answers)
Closed 4 years ago.
Hi guys ive got a button with jquery like this :
<html>
<button id = "index.php">
</button>
</html>
<script>
$('#index.php');').click(function(){
//stuff
});
</script>
however it seems that the id with a "." isnt accepted by jquery - is there a way to make it work?
Try escaping the .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "index.php">
</button>
<script>
$('#index\\.php').click(function(){
console.log('stuff');
});
</script>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I am very new to javascript. I am trying to place value on one input field. But it is not working, I don't know why..
document.getElementById("c_add").value='sssssss';
in the text area with id "c_add", I supposed that value will place as "sssssss", but it is not setting any value..
Full Code:
<body>
<script type="text/javascript">
document.getElementById("c_add").value='sssssss';
</script>
<textarea name="c_add" id="c_add"></textarea>
</body>
Did you tried do like this?
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>