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>
Related
We have 2 webpages one.html & two.html.
In one.html we have a button element with text,
<button id="next">Next</button>
We want to display the content inside the button from one.html, i.e "Next" in two.html inside a
<p id="getfromone"></p>
We tried using jQuery about it, written below, called by a onload function with in body element.
document.getElementById("getfromone").innerHTML = $('#getfromone').load("one.html #next");
However, this only displays [object Object]
Please suggest what can be done about it.
Try this out, You can check the working code in codepen.
$(document).ready(function(){
var content;
$("#oneDiv").load("one.html button#next", function(){
content = $(this).text();
$("#getfromone").text(content);
});
});
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);
There are a few things I'd like help with. I have found pieces of the solution on stack overflow, but can't quite put it all together.
I'd want the user to add text to a text area, click a button to post the text to a parent element, and finally have the option to remove the posted text element from the parent. This is as far as I have gotten on the code. Thanks in advance for any suggestions.
<body>
<h4>A News Module.</h4>
<div id="container">
<p>Here is some news.</p>
</div>
<textarea id="alltext" rows="13" cols="53" placeholder="Add your news here."></textarea>
<br>
<input type="button" value="Submit News" onclick="addNews()">
<script>
function addNews(){
var addEl = document.createElement('p');
document.getElementById('container').appendChild(addEl);
}
function deleteNews(){
var deleteEl = document.getElementById('container');
deleteEl.parentNode.removeChild(deleteEl);
}
</script>
</body>
Also on jsfiddle: https://jsfiddle.net/lotus89/nvo1s5re/
Two things.
1) You need to add the text from the textboxt into the newly created element. Add the folowing line right after the creation:
addEl.textContent = document.getElementById('alltext').value;
This grabs the value of the texbox and sets it as the textContent of the newly created element.
2) addNews() needs to be in the global scope for jsfiddle
Add this line:
window.addNews = addNews;
Edit: Update fiddle - https://jsfiddle.net/rtj998gL/1/
Take a look at your addNews code. You're creating a new p and adding it to the container, but you're never putting anything in it.
function addNews(){
//Create blank P element
var addEl = document.createElement('p');
//Set the new element's content to match the textarea value
addEl.innerHTML = document.getElementById("alltext").value;
//Add it to the container
document.getElementById('container').appendChild(addEl);
}
If you put your <script> in the head of your page, your code would work fine. But being that it's in the <body>, your functions are not being found because they are out-of-scope. You can adjust for this by doing window.addNews = addNews within your <script> tags.
How to setup a div to see the instant result of html by making the div contenteditable. Like
<div id="edit" contenteditable="true"></div>
<button id="trigger">Apply code</button>
Here, div id="edit" assumed to be editor and result viewer as well itself. e.g. write code on div then click on "Apply code" button and the result of html code written in div should be appeared within the same div (i.e. div id="edit").
html
<div id="edit" contenteditable="true"></div>
<button id="trigger" onclick="applyCode()">Apply code</button>
js
function applyCode() {
$('#edit').html($('#edit').html());
}
So here's the basic setup of what you're trying to do...
<div id='editor' contenteditable></div>
<button id='trigger' value='apply'>
And the JS code:
document.getElementById('trigger').addEventListener('click', (function(dv)
{
return function()
{
dv.innerHTML = dv.textContent;
};
}(document.getElementById('editor'))), false);
Here's a fiddle.
But play around with it, and you'll soon find out that there's a problem with it: Try adding markup tags, and edit the input a second time. That's not going to work as well as you'd hope.
Also check out the resulting DOM, after the user puts in some multi-line input: new divs, paragraphs and what have you are added. You'll have to preserve that markup, using something like:
document.querySelector('#editor').addEventListener('click', function()
{
var currentMarkup = this.innerHTML;
}, false);
Then, you'll have to set about sharing that innerHTML with the trigger event handler, and find a way to check if the user changed the actual markup. Have fun with that...
I suggest you use tools that have already been written, tried and tested, instead of setting about building your own.
It'll take you too long, and you'll end up with something that's not even half as capable as the existing editors out there.
Check this related post for details: Replace words of text area
First you need to create an input box where you can type your html code.
<div id="edit"><textarea id='editor'></textarea></div>
Then there is the button, which 'renders' the code.
<button id="trigger">Apply code</button>
Next, you need to create a javascript code which changes the content of '#edit' to '#editor' 's value.
var edit = document.getElementById('edit');
var editor = document.getElementById('editor');
var trigger = document.getElementById('trigger');
trigger.onclick = function() {
edit.innerHTML = editor.value;
};
Fiddle: http://jsfiddle.net/W75Ut/1/
<div id="editable" contenteditable="true">aaaaaaa</div>
<br/>
<button onclick="texttohtml()">Click to apply Html</button>
<script>
function texttohtml()
{
var t=$("#editable").text();
$("#editable").html(t);
}
</script>
I've been searching the web for some tips regarding how to make your own numpad, created with html code, to act as a numpad would on the computer.
I have this numpad on my website that would give an input to a textfield in the same div. I've given a value to each button and now I guess I would have to create something more so that the numbers will add to my text field.
I'm really a beginner with programming so maybe this is really easy. Thanks for the help!
You could do it, alternatively, with jQuery. jQuery is better IMHO if you need a simple easy solution (jQuery is generally easier and faster).
HTML:
<div id="myDiv"> </div> //the div to which we add text
<div id="buttonContainer"> //this is the div containing the numbers (the numpad)
<button value="one"> one </button>
<button value="two"> two </button>
</div>
jQuery:
$("#buttonContainer button").click(function() {
$("#myDiv").append($(this).val());
});
http://jsfiddle.net/DLzUU/1/
What this does is: when you click any button inside the div with id of 'buttonContainer', it adds its value to the div with the id of "myDiv".
On the Javascript subject, if you want a VERY good guide: http://javascript.info/
what you need is to learn javascript. With javascript you will be able to write code to do this.
<script>
function AddValueToTextField(val)
{
document.getElementByID( <textfiled ID> ).value += val;
}
</script>
<button onClick="AddValueToTextField(this.value)"></button>
this is only very basic but it is a rough idea of what is needed, the button is set to call the function "AddValueToTextField" when it is clicked. When the function is called the value of the button is sent along with it. Inside the function it gets a handle on the textfield and adds the value of the button to whatever was already there, I'd suggest looking at:
http://www.w3schools.com/js/
as a place to start learning javascript.
you can try http://keith-wood.name/keypad.htmlkeypad example, this is an awesome example
$(document).ready(function(){
var selected;
$(".admin_loginid input").focus(function(){
selected = $(this);
});
$(".loginbtn").click(function(){
selected.val(selected.val() + $(this).val());
});
});
Solved it that way and it works really well, thanks for the help! Now my selected input box takes the input from the numpad that i've created.