Develop Reference

How do I hide this paragraph tag?

I'm quite new to all this but I learned quite quickly, as it's really easy in my opinion. I'm trying to make a button hide a <p> tag that another button spawned. How can make the button (At the bottom of code) make the <p> tag disappear?
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>

You have to define the called function and using display:none hide the paragraph
function myFuction() {
document.getElementById('date_button').style.display = 'none'
}
<button type="button" onclick="document.getElementById('date_button').innerHTML = Date();document.getElementById('date_button').style.display='block'">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>

In your case you want to show it again so you need to set its innerHTML to ''. In your case if you will do style.display = 'none'. It will not show <p> again
function myFunction(){
document.getElementById('date_button').innerHTML = '';
}
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFunction()">Click this to hide date.</button>

Try this. I think this can help
function myFuction() {
document.getElementById('date_button').style.display = 'none';
}

Cannot to display one chart at a time when clicked on first button in JavaScript?

After checking some related questions, couldn't find any good answers.
I have created 2 different charts(with Chart.js). And I have 2 buttons (btn1 and btn2), when clicked on btn1, I want to display the 'languageSkillchart'. However when clicked on btn2 then it should display 'programmingSkillchart'.I have tried in several ways but I am only getting the language skill chart even when i clicked btn2.
Your help would be greatly appreciated.
Both Of my Charts in same page:
In my CV.html, I have two Buttons
<div id="chartButton" class="langBtn">
<button id="btn1" class="button">Click Me!</button>
</div>
<div id="chartButton" class="codeBtn">
<button id="btn2" class="button">Click Me!</button>
</div>
//have added the script
<script src="js/showAndHideSkills.js"></script>
MySkillChart.html page
<div id="langchartcontainer" class="Chartcontainer">
<canvas id="languageSkillsChart"></canvas>
</div>
<!--The hidden Programmingskill div, -->
<div id="codechartcontainer" class="Chartcontainer" style="display: none">
<canvas id="codingSkillsChart"></canvas>
</div>
showAndHideSkills.js
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var langchartcontainer = document.getElementById("langchartcontainer");
var codechartcontainer = document.getElementById("codechartcontainer");
//alternative: 1
/*btn1.addEventListener('click', function () {
window.open('mySkillsChart.html', '_blank');
langchartcontainer.style.display = 'block';
});
btn2.addEventListener('click', function () {
window.open('mySkillsChart.html', '_blank');
codechartcontainer.style.display == 'none';
codechartcontainer.style.display = 'block';
});*/
//Alternative: 2
/*if(btn1.onclick(window.open('mySkillsChart.html', '_blank'))){
codechartcontainer.style.display == 'none';
langchartcontainer.style.display = 'block';
}else if (btn2.onclick(window.open('mySkillsChart.html', '_blank'))){
langchartcontainer.style.display = 'none';
}
}*/
//Alternative: 3
$(document).ready(function(){
$("#btn1").click(function(){
window.open('mySkillsChart.html', '_blank');
$("#langchartcontainer").slideToggle("fast");
$("#codechartcontainer").hide("fast");
});
$("#btn2").click(function(){
window.open('mySkillsChart.html', '_blank');
$("#codechartcontainer").show("fast");
$("#langchartcontainer").hide("fast");
});
});
[1]: https://i.stack.imgur.com/7OZ1K.png
The output I get is:

Option 1:
By opening new window you could open 2 different html files (langchartcontainer.html and codechartcontainer.html) instead of just only one and put images in their own html file:
$(document).ready(function(){
$("#btn1").click(function(){
window.open('langchartcontainer.html', '_blank');
});
$("#btn2").click(function(){
window.open('codechartcontainer.html', '_blank');
});
});
Option 2:
If you definitely want to use only one html file to open you need to pass a variable in order to dictate which image is shown in the external html. Because you can't control with javascript what happens in a different file:
something like:
window.open('mySkillsChart.html?whichImagetoShow=A', '_blank');
And in the external html mySkillsChart.html you need to insert a different javascript code in order to read the variable whichImagetoShow and do show/hide code inside of that page.
3) You want to show the images in same page with the one which you paste code above (CV.html), than don't use open window code, just show/hide but you need to have the images displayed in same page.

If you're using window.open() it will put your MySkillChart.html page in a new document, meaning you won't be able to access it from the your CV page. To have access to it from there you would need to put it into an iframe or container on your CV document.
So your CV.html would be something like:
<div class="chartContainer"></div">
<div>
<button class="lang">Click Me!</button>
</div>
<div>
<button class="code">Click Me!</button>
</div>
<script>
$.get('MySkillChart.html').done(charts=> {
$(charts)
.appendTo('.chartContainer')
.find('.Chartcontainer')
.hide();
})
$('button')
.on('click', ()=> $('.Chartcontainer').hide())
.on('click', '.code', ()=> $('.codechartcontainer').show()
.on('click', '.lang', ()=> $('.langchartcontainer').show());
</script>

It seems that you need to "switch" values on your html buttons divs:
<div class="chartButton" id="langBtn">
<button id="btn1" class="button">Click Me!</button>
</div>
<div class="chartButton" id="codeBtn">
<button id="btn2" class="button">Click Me!</button>
</div>

Button on click creates alert to show data-id attribute

I have a button like so:
<button data-id="1" onclick="showID()">Show ID</button>
And a function:
<script>
function showID() {
alert(($(this).data("id")));
}
</script>
I just want the data-id to be shown in the alert box. I've also tried
alert(($(this).data("id")));
But again nothing...

$(this) inside your click function indicates to either global in sloppy mode or undefined in strict mode.
You need to do like this:
<button data-id="1" onclick="showID(this)">Show ID</button>
<script>
function showID(elem) {
alert(($(elem).data("id")));
}
</script>

Try this
function showID(button) {
alert($(button).attr('data-id'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>

Currently this will not give you the right value, your code should be this way:
<button data-id="1" onclick="showID(this)">Show ID</button>
Then
<script>
function showID(e) {
alert(($(e).data("id")));
}
</script>

this doesn't work the way you are trying.
pass this on click.
Check out this fiddle.
Here is the snippet.
function showID(ele) {
alert(($(ele).attr("data-id")));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>

Here there is an example, you have to pass the id to function in the button tag:
JavaScript - onClick to get the ID of the clicked button

How to remove the content from a "div" element using a button "onclick" function?

I have a div element that contains a number of images. When the user clicks a button, I want the contents of the div to be removed (not the div itself, I want to reuse the div to potentially add new content).
In my HTML, the div and button are defined as:
<body>
...
<div class="MyDiv"></div>
...
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
...
</body>
How do I write a function that removes all elements from this div?

You have to call removeChild:
function removeDivFunction() {
MyDiv.parentNode.removeChild(MyDiv);
}

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});

David has already pointed you to an existing question/solution.
For reference consider reading: http://www.w3schools.com/js/js_htmldom_nodes.asp
Its always a good idea to assign id to the div.
Also if you are using jQuery you can delete element by $("#divid").remove() for reference see: https://api.jquery.com/remove/
I hope this helps.

function removeDivFunction() {
$(".MyDiv").remove();
}

<div class="MyDiv">I need to remove</div>
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
function removeDivFunction() {
var element = document.getElementsByClassName("MyDiv")[0];
element.parentNode.removeChild(element);
}
DEMO

You can try
Html
<div id="some">Example</div>
<button onclick="myFunction()">Click me</button>
javascript
function myFunction() {
var child = document.getElementById("some");
child.parentNode.removeChild(child);
}
And if you want to erase content of DIV then use
child.innerHTML = "";

How to replace html button with plain text

How do you replace a button with whatever words were on the button before? I was looking at an answer to another similar question, which said to use something like:
var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);
but that had made what other buttons do change. Does anyone know another way to change a button to regular text?
I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. I'm just wondering if anyone knows another way to do it.
Thanks

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">
<input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
</div>
</body>
</html>
<script type="text/javascript">
function change(){ //function to run when you click on the button...
var buttonValue = document.getElementById("submit").value; //stores the button value
document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely
}
</script>
EDIT:
I've just noticed you had multiple buttons in your page, which will make my previous example wrong. heres something that will make you work easier i think in case you will add extra buttons:
first heres the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
<li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
<li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
</ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
var buttonValue = document.getElementById("button_"+id).value;
document.getElementById("id_"+id).innerHTML = buttonValue;
}
</script>
In the HTML part, you can create a list (li) of buttons if that's your layout...
each list will have its own id, in this case id_x that will be used later when you replace its content. each button calls a function change(id) while id is just a unique number for each button.
In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text.
Let me know if you still need any other help.

Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way.
HTML
<div>
<button id="btn1" class="change-button">A button with some text 1</button>
<button id="btn2" class="change-button">A button with some text 2</button>
<button id="btn3" class="change-button">A button with some text 3</button>
</div>
jQuery
// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
// First we get the ID value of the clicked button
// example: "btn2"
var buttonId = $(this).attr('id');
// Then we get the html value of the clicked button
// example: "A button with some text 2"
var buttonText = $(this).html();
// We use the function replaceWith, to replace the button to a <span>
// with the buttonText variable we have
$('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});
As you can see, it's a lot more cleaner with jQuery. You should try it!
Here is the fiddle so you can test it.

<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;
document.getElementById("ad").innerHTML = a;
}
</script>
<body>
<div id="ad">
<input type="button" value="hello" id="hello" onClick="fun()">
</div>
</body>
</html>
sorry, edited the wrong post