I am trying to place a button after an already existing button on another website. I'm trying to test it out in Chrome console, but can't figure it out.
var buttonPosition = document.getElementById('<button class="button black ">Black</button>');
This is the button that I want to place my button behind.
I then tried using the .insertAdjacementHTML function to get the button placed behind "button black"
buttonPosition.insertAdjacentHTML("afterend", "<button>Hello</button");
Then I get the error message
"Uncaught TypeError: buttonPosition.insertAdjacentHTML is not a
function
at :1:16"
This could be a rookie error, as I am very new to coding. Any help at all will be greatly appreciated. Thanks.
That's because the value of your getElementById() is not an element's ID name but an element. Try adding an ID on your button then pass its ID name to getElementById() as the value, like this:
HTML
<button class="button black" id="btn">Your button with an ID</button>
Javascript
var btn = document.getElementById('btn'); // The button itself with an ID of 'btn'
var newButton = '<button>New button</button>'; // New button to be inserted
btn.insertAdjacentHTML('afterend', newButton);
"document.getElementById" itself clarify that it want "id" of the element. As per your snippet var buttonPosition = document.getElementById('<button class="button black ">Black</button>'); I can say that you are missing the "id" but the element itself.
Solution 1::
Provide the id to the button and then try to use that id like:
<button class="button black " id="btn">Black</button>
Javascript:
var buttonPosition = document.getElementById('btn');
Solution 2::
If you are not able to provide the id, then use the class name.
var buttonPosition = document.getElementsByClassName('button')[0];
var newButton = '<button>Button</button>';
buttonPosition.insertAdjacentHTML('afterend', newButton);
Related
I am trying to select the saveBtn class on each button so that when I click it it saves it into local storage. However it is only saving the first instance of the selected class. Can anyone help?
html:
<div class="hour-container" id="8am">
<div class="hour"> 8 AM </div>
<textarea class="text-content"></textarea>
<button class="btn saveBtn"><i class="fas fa-save"></i></button>
</div>
js:
// Function to save the users input to the text area
function saveText() {
var textContent = $(".saveBtn").siblings(".text-content").val();
var hour = $(".saveBtn").parent().attr("id");
localStorage.setItem(hour, textContent);
console.log(textContent);
}
// Call saveText on save button click
$(".saveBtn").on("click", saveText);
In the event handler, the searching scope of $(".saveBtn") is the whole web page.
That means the reference point of all actions is referred to the beginning of the web page.
So, the function $(".saveBtn") always refer to the first element which has the saveBtn CSS class.
You may modify the saveText function as the following:
function saveText() {
var textContent = $(this).siblings(".text-content").val();
var hour = $(this).parent().attr("id");
localStorage.setItem(hour, textContent);
console.log(hour,textContent);
}
For my solution, the this refers to the element which has been clicked by a user, so the reference point of all actions is referred to the element which has been clicked, therefore it should be work fine.
My aim is to change a (+) Icon to a (-) Icon with a click of a button. I've read other posts but couldn't find an answer using JS. How would I be able to replace an icon with just a click of a button?
<ion-button onclick = "favourite()"><ion-icon name="add-outline"></ion-icon></ion-button>
My function has nothing inside it as I have no clue of how to do it.
Hope I was clear enough. Thanks, much appreciated.
Put the this reference in the function argument so your function will know which element was clicked.
<ion-button onclick = "favourite(this)"><ion-icon name="add-outline"></ion-icon></ion-button>
Then in your js file
function favourite(el) {
el.querySelector('ion-icon').setAttribute('name', 'minus-outline');
}
This is saying "starting at the element that was clicked (el) find the first element with the tag name ion-icon and change it's attribute name to 'minus-outline'"
I don't have a way of testing this, so let me know if it works.
I create a button dynamically through javascript.
When I click on it I get the mentioned error.
The button is created like this:
var button = document.createElement("Button");
button.setAttribute("onclick", "FollowUser('" + name + "')");
button.setAttribute("id", "FollowUserButton");
When debugging it, I've tried to figure out what goes wrong when I create it. It seems to be in the part where I make the onclick event. Nothing seems odd when I set the id.
This output is returned:
button {disabled: false, form: null, formAction: "https://localhost:44398/Home/UserProfile?name=Test", …}
I'm providing my solution by presuming few things here. Please make sure to make the suitable changes in your code. The below code snippet will provide a base to the answer you want.
let name = "foo";
var button = document.createElement("BUTTON");
var text = document.createTextNode("Click me");
button.appendChild(text);
button.setAttribute("onclick", `FollowUser('${name}')`);
button.setAttribute("id", "FollowUserButton");
// Append this button to a node. For instance, append it to the body.
document.body.appendChild(button);
// Function added for testing onclick event.
function FollowUser(str) {
console.log(str);
}
I'm using template literals here to make the code more readable and less chaotic.
My goal is to create a button that when pushed will execute javascript to insert html that creates a new div with content inside of it. I have been able to get the button to click and
preform a .toggleclass and I have tried to use .html , .insertAfter(input.html()); but I have not had any luck.
My HTML for button
<input id="slideshow" name="viewing" value="View Slideshow" type="button"
onClick="newOverlay();">
current javascript
function newOverlay(){
var newItem = $("<p>Add this text instead</p>");
$("input").insertAfter(this.html("<p> Is this going to work</p>"));
}
I know this is adding a < p > and not a div but I tried to make it similiar thinking if I could get it to insert this paragraph then I could work on inserting the div.
Thanks for looking at this.
If you want to insert a p tag after every input, then you should do
$("input").after("<p> Is this going to work</p>");
If you want to inser the p tag after the input that was clicked then you would do
$(this).after("<p> Is this going to work</p>");
Where do you want to append your new item?
You should do something like this I guess.
function newOverlay(){
var newItem = $("<p>").text("Add this text instead");
$("YOUR_SELECTOR_HERE").append(newItem);
}
Give a sample with jsFiddle.
I want to make a format like the following:
Phrase
[Button]
When the button is clicked, the 'phrase' changes and the button remains. I am able to make it so text appears, however I can not make it so the button stays. Does anyone have an idea of how this may be done? Thanks.
Final script
Javascript (replacement)
function displayPhrase()
{
document.getElementById("demo").innerHTML = 'New Phrase';
}
HTML (Old phrase)
<span id="demo">Old Phrase</span>
HTML (The button)
<button type="button" onclick="displayPhrase()"></button>
Credit to above answers ^_^
Take a look at this.
I am able to make it so text appears, however I can not make it so the button stays.
My guess is you are updating the element that also contained the button element, and this update is clearing the button.
HTML
<span id="phrase"></span>
<button id="change-phrase" type="button">Change Phrase</button>
JavaScript
var button = document.getElementById('change-phrase'),
content = document.getElementById('phrase');
button.onclick = function() {
content.innerHTML = 'Your new phrase';
};
jsFiddle.
Use this code:
HTML:
<h1> Welcome to the </h2><span id="future-clicked"></span>
<button onclick="clicked_on()">Click for future</button>
JS:
<script>
function clicked_on(){
document.getElementById('future-clicked').innerHTML = 'Future World';
}
</script>