This question already has answers here:
What does innerHTML do in javascript?
(11 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed last month.
I can't fix this simple problem, I created a simple button and then a title which says "hello" .
If you press that button the text of the title should be changed for another text (any text I don´t care).
If I use jQuery it works perfectly, but I want to do this without jQuery just for learning.
document.querySelector(".btn").addEventListener("click", function() {
document.querySelector("h1").innerHTML("hola como estas")
});
<h1 class="title">HELLO</h1>
<button class="btn" type="button"> Click me</button>
I use all the getElement and more and it doesn't work, it's supposed to change the text.
const btn = document.querySelector("button");
const chngTxt = document.querySelector("h1");
btn.addEventListener("click", function () {
chngTxt.innerHTML = "hola como estas";
})
<h1>Hello</h1>
<button id="changeText">click me</button>
or you can just change your innerHTML to quotation mark
document.querySelector(".btn").addEventListener("click", function(){
document.querySelector("h1").innerHTML = "hola como estas";
});
Related
This question already has answers here:
Get element from which onclick function is called
(9 answers)
Closed 1 year ago.
I want to color these elements using the same function. When I click on one of them, the same element that was clicked will be colored. How is that done using JavaScript
<button class="btn" onclick="color()">A</button>
<button class="btn"onclick="color()">B</button>
const $button = document.querySelector('.btn')
$button.addEventListener('click', () => {
$button.style.color = "#0099ff"
})
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 7 years ago.
I am trying to replace some text in a DIV tag using JavaScript, but the tag only has a class not an ID. I have tried:
document.getElementByClassName('theClassName').innerHTML = 'text i want to insert in place of the existing text';
This has not worked, I also tried the above but using getElementById but that didn't work either.
UPDATE:
I think I need to explain more (sorry im a n00b coder). What I am doing is loading a website into a WKWebView using Swift, I am then injecting a .JS file at the end of the page loaded. Within that .JS file I am then trying to do the above with no success. I can find a DIV and hide it so far but being able to replace the text is proving hard.
Here is what I tried last but this did not work either:
var classes = document.getElementsByClassName("title-random");
for(var i=0;i<classes.length; i++) {
if(classes[i].innerHTML == "The old text") {
classes[i].innerHTML = "the new text";
break;
}
}
I have even tried generic "find this text" and replace it code but with no effect
Hi if u have the class on several divs u have to access via array like this:
<!DOCTYPE html>
<html>
<body>
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<p>Click the button to change the text of the first div element with class="example" (index 0).</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 7 years ago.
I am tring to create the update status box like facebook using Javascript/jQuery.
When i click on post button the div element is created but the button that i have appended inside it is appearing only once.
This is my script code:
var hello = function() {
var post = $.trim($("#status_message").val());
if (post.length != 0) {
$('<div id="hi">').text(post).prependTo('.posts');
$("#status_message").val(" ");
$("#hi").append($("#delete"));
$("#hi").append($("#comment"));
}
}
html code:
<input type="button" id="post" name="submit" value="Post" class="btn btn-primary" onclick="hello()">
<div class="counter"></div>
By using .append($('#delete')); You are simply moving an existing div called $('#delete') and appending it to the #hi element. So only one will be used...
However, some of the stuff you are doing doesn't make any sense anyways... You shouldn't use id if you are going to have more than one of them as a rule of thumb. If you have multiple elements with the same name you should have them identified as a part of a class and use the class attribute. If there is only one element then you should use id.
You would want to do something like this...
function hello() {
var post = "test";
var content = $('<div class="hi">');
content.text(post)
.append($('<div class="delete">delete</div>'))
.append($('<div class="comment">comment</div>'))
.prependTo('.posts');
}
This question already has answers here:
How to get the pure text without HTML element using JavaScript?
(10 answers)
Closed 7 years ago.
<p id="mydiv">
<img alt="Assets Received" src="/images/icons/statuses/generic.png" title="" height="16" width="16"> I want to get this text only, not the image element before me
</p>
I want to retrieve the text inside of mydiv excluding the image tag.
fiddle https://jsfiddle.net/Town/5L3rd/
In modern browsers this property is called textContent:
document.getElementById('mydiv').textContent // " I want to get this text only, not the image element before me"
If you want to support rocks and dust (IE8), you also need to check the innerText property. Together you can create a function to anonymously get the text:
function getText(el){
return el.textContent || el.innerText;
}
This question already has answers here:
JavaScript DOM remove element
(4 answers)
Remove element by id
(19 answers)
Closed 8 years ago.
I'm using this widget/snippet:
<div class="tbnet-gadget">
<div id="tbnet-g4">Carregando...</div><a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
<script async src="http://gadgetsparablog.com/ws/tabeladobrasileirao/script?funcao=g4&campeonato=serie-a" type="text/javascript"></script>
</div>
This widget forces a link on the bottom of it (Tabela do Brasileirão). If I change the href tag, the widget won't work.
I want to still use this widget, but I'm trying to remove that link from the bottom of it.
I managed to remove the href attribute using document.getElementById("tbnet-link").removeAttribute("href");, but the text "Tabela do Brasileirão" is still showing up.
This is how it looks like on JSFiddle: http://jsfiddle.net/3nhwf6tw/
How can I remove the whole <a id="tbnet-link"...Brasileirão</a> using javascript?
Thanks.
http://jsfiddle.net/3nhwf6tw/#&togetherjs=1DF8EF6xuh
How about just using CSS instead:
#tbnet-link{
display: none !important;
}
JSFiddle
Here is the non-CSS version (which is a bit ridiculous):
You can remove this:
<a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
If you add this jQuery and remove the script in your html:
$.getJSON("http://54.207.27.130/ws//tabeladobrasileirao/g4.jsonp?callback=?&campeonato=serie-a&time=None", function(k) {
$("#tbnet-g4").html(k.html.replace(/\<script.*?\<\/script\>/, ""));
});
JSFiddle no-CSS
To remove the element:
var el = document.getElementById("tbnet-link");
el.parentNode.removeChild(el);
To just clear the text:
var el = document.getElementById("tbnet-link");
el.innerHTML = ""
If you're up for jQuery, it's really easy:
$(function(){
$("#tbnet-link").remove();
});