This question already has answers here:
How to use getElementsByClassName in javascript-function? [duplicate]
(3 answers)
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I can't find a way to change the string "FIND NOW" into something else.
I have tried for hours
<button type="submit" class="qbutton default" style="">FIND NOW</button>
I tried something like this:
<script>
document.getElementsbyClassName('.button.qbutton.default').innerHTML('change it!');
</script>
Could someone help please?
Use document.querySelector('button.qbutton.default') as querySelector() will allow you to select the particular element based on the selector and not list of elements. Also you need to use button as selector and not .button and make sure the script is after the body element to get the HTML rendered properly first.
document.querySelector('button.qbutton.default').innerHTML = 'change it!';
<button type="submit" class="qbutton default" style="">FIND NOW</button>
Related
This question already has answers here:
Can you do an 'AND' on a jQuery selector to target multiple buttons?
(3 answers)
Closed 4 months ago.
I'm a beginner with JavaScript so I'm sure this will be an elementary question.
With this function below, I want it to find the two elements and add them to a header element. Right now, the only thing that is working is the element, the link with the rel:author tag. I'm sure this is probably a syntax thing.
(function($) {
$(document).ready(function() {
$(".single .single-post-module").each(function() {
$(this).find('a[rel="author"]', 'span[class="updated"]').clone().appendTo($(this).find('.post-header h1'));
// ^^^
});
});
})(jQuery)
Edit: I'm using Divi on wordpress and the site is in maintenance mode. That's why didn't show the HTML or give a link.
This could be done with pure Javscript querySelectorAll with an CSS selector that will find both elements.
To clone the element, use cloneNode(true) where the first parameter indicates to clone 'deep'
const header = document.querySelector('.post-header > h1');
const elements = document.querySelectorAll('.single, .single-post-module');
Array.from(elements).forEach(e => header.append(e.cloneNode(true)));
<div class='single'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='single-post-module'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='post-header'>
<h1></h1>
</div>
This question already has answers here:
Is "clear" a reserved word in Javascript?
(4 answers)
Closed last year.
I wrote a small HTML file. I added few buttons with onclick attributes and wrote my functions inside a "script" tag. All of them are working perfect but the function with name "clear" doesn't work.
HTML:
<div>
<input type="button" value="Copy" onclick="copy();" />
<input type="button" value="Clear" onclick="clear();" />
</div>
JavaScript:
function copy() {
console.log("copy");
navigator.clipboard.writeText(
document.getElementById("result_box").value
);
}
function clear() {
console.log("clear");
}
When I click on both of this buttons browser console shows me only one message: "copy". No errors.
If I change the name of this function it starts working. I don't understand why is it happening. I thought the word "clear" is reserved word of JavaScript but I couldn't find this word in the list of keywords in documentation.
Any ideas?
The reasoning behind this is that clear() inside a button calls document.clear instead of your clear.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I am trying to access the value of the buttons I have created in JavaScript but it keeps showing up as undefined.
const button = document.querySelectorAll("button").value;
console.log(button);
<div class="row">
<div class="col">
<button type="button" value="7">7</button>
</div>
<div class="col">
<button type="button" value="8">8</button>
</div>
<div class="col">
<button type="button" value="9">9</button>
</div>
</div>
querySelectorAll returns an array-like group of elements, so to get value from all you need to do something like:
document.querySelectorAll("button").forEach(button => button.value)
Or for a specific one: document.querySelectorAll("button")[key].value
Note sure if you can give a value to a button..have you tried instead with a input?
document.querySelectorAll("button") will get you an array of buttons.
To access the value you will need to use array notation:
const button = document.querySelectorAll("button");
console.log(button[0].value);
console.log(button[1].value);
const button = document.querySelector("button").value;
Seems to fix it, using querySelector rather than querySelectorAll
I'm guessing that it's because querySelectorAll returns a nodeList of the buttons and that list doesn't have the value property.
It looks like the issue that you are running into is that document.querySelectorAll returns a NodeList (kinda like an array of nodes, but with fewer helper methods attached), not the nodes themselves. If you want to access the values of the buttons, you'll need to specify the index of the node that you want:
const button = document.querySelectorAll("button").value;
console.log(button[0].value); // 7
console.log(button[1].value); // 8
console.log(button[2].value); // 9
This question already has answers here:
window.open() add a rel="nofollow" attribute
(3 answers)
Closed 5 years ago.
I want to make the links in this javascript code nofollow. Please help me how to do that.
<img src="https://example.png/>
According to https://developer.mozilla.org/en-US/docs/Web/API/Window/open you can add a third parameter in the window.open method that is a comma separated string with name value pairs - but rel is not supported...
Seems like html may be a good option.
<a href="www.example.com" rel="nofollow" target="_blank" >Link</a>
If you need to do this from js you could trigger a click on the link.
This question already has answers here:
What is href=javascript:;
(8 answers)
Closed 5 years ago.
What is the purpose of javascript:; in the href attributes of the hyperlinks?
<div data-trigger="spinner" id="spinner">
<span id="spinner-value"></span>
<input type="hidden" value="1" data-spin="spinner" data-rule="quantity" data-max="10">
-
+
</div>
the attribute href="javascript:;" is used to remove the behavior from the link.
If you would use eg. href="", the webpage would reload when you click the link. But with href="javascript:;" nothing will happen.
Later a script adds an event handler that will be executed when clicking this link.
EDIT: You need a or button elements as they are the semantic representatives for clickable objects.
To prevent links from refreshing webpage/redirecting you once clicked.
the purpose of "javascript:;" have save meaning with "javascript:void(0)"
Read here : javascript void functions