What does this HTML and JS do? [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
<!DOCTYPE html>
<html>
<body>
<h1>Change an HTML element</h1>
<p id="msg">Now you see me.</p>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Gone!'">
Click Me!</button>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Back again!'">
Bring me back!</button>
</body>
</html>
Can someone explain what this does?

When you click on the first button it fires an onclick event attribute. You've told the event to find an element by the ID of 'msg'. Which is the <p> tag above.
It finds it and then replaces the innerHTML value of "Now you see me" with the string 'Gone!'. Pretty much the same thing happens with the second button.
You can learn more about it at the web address below.
http://www.w3schools.com/tags/ev_onclick.asp

Related

Call jquery tag in javascript function [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
<script>
function addMoreAns() {
$(".add").append("<h1>Hi</h1>")
}
</script>
It is my jquery tag in javascript function.
jquery tag don't work under javascript function
You must have three things for your code to work:
You must make sure to have the JQuery library referenced prior to your use of any JQuery code.
In the HTML, you must have an element that is allowed to contain content with an add class.
You must invoke your function somehow. Just writing a function isn't the same thing as running it. You have to decide when the function should run and set up your code to invoke it at that point.
In the example below, the function is invoked every time the button is clicked.
document.querySelector("input[type=button]").addEventListener("click", addMoreAns);
function addMoreAns() {
$(".add").append("<h1>Hi</h1>")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Click to Add">
<div class="add"></div>
You need to load the jQuery library in the head of your page
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

javascript/html: Remove element by ID on button click [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
In short, what I want to do is make it so when I click a button in my HTML document, I want that button to subsequentely be removed by it's ID, using javascript if possible. I've been searching for a solution with no success, can anyone help me out here?
In your HTML:
<button onclick="deleteSelf(this)">Click me</button>
In your JavaScript:
function deleteSelf(button) {
button.remove();
}
This works:
https://jsfiddle.net/00p4oLfy/
document.getElementById('test').remove();
<p id="test">This is a test</p>
<p id="test2">This is another test</p>
Html
<div>
<button id="ClickMe">Click Me</button>
</div>
Javascript
document.getElementById('ClickMe').remove();

Div tag content not showing on click [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to display the data of a div tag on a href click, the id is dynamically made. But the div tag is not responding. The sequence of the code is as below. The file is the .tpl file.
function editPickUpAddress(divId)
{
("#pickupAddressForm_"+divId).show();
}
<a href style="float:right;margin-top:-20px;margin-right:100px;" onclick="editPickUpAddress({$item.profile_id});">Edit</a>
<div id="pickupAddressForm_{$item.profile_id}" style="display:none">
//some content to display
</div>
After cleaning up your snippet and including jQuery, the code works as intended. Also note the href="#" which prevents the anchor tag from navigating to another page.
function editPickUpAddress(divId) {
$("#pickupAddressForm_" + divId).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit
<div id="pickupAddressForm_1" style="display:none">
//some content to display
</div>

Clone a div with jQuery Clone function [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to clone a div without its value. Everything I've tried so far copies the value as well.
Here is my jQuery function
$('#add_more').click(function(){
$('#div_to_clone).clone().insertBefore('#add_more').find('input').val('');
});
This seems to be working fine for me:
$('#add_more').click(function() {
$('#div_to_clone').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div_to_clone">
<input type="text" />
</div>
Add more
Well, I recommend you changing your id to a class since the value of id attribute should be unique throughout the page. You might be getting the issue in some browser due to duplicate id.
$('#add_more').click(function() {
$('.div_to_clone:first').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div_to_clone">
<input type="text" />
</div>
Add more
Assuming that your html code is similar to this.
<div class="ContainerDiv">
<div id=ClonethisDiv><input class="InputTxtBox" type="text" /></div>
</div>
clone
Now,
$("body").on("click", "a", function() {
$("#ClonethisDiv").clone().appendTo(".ContainerDiv").find(".InputTxtBox").val("");
});
Hence on click, anchor tag u will able to get a copy of Div with Id='ClonethisDiv' and appended to the container Div.
Here while cloning(copy) input element with a class '.InputTxtBox', will be emptied and get copied. No worry! TextBox Values which already appended to container Div doesnot change.
Hope this will help you.

HTML Text Editor - Simple Code [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I want to create a very simple HTML toolbar that can do bold, italics and underline so when users select a content editable area within the html page that they can change the default text. Been doing loads of looking around on the internet but all i can find is jquery's with a million lines of code and i really don't want to use these as a lot of the code will be redundant.
Anyone know the code / know where i can get the code that is short and sweet and to the point
Thanks
below a simplest sample for ContentEditable. For documentation see https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contenteditable simplest sample</title>
</head>
<body>
<button id="bold">b</button>
<button id="italic">i</button>
<button id="underline">u</button>
<div contenteditable="true">
Textinput here
</div>
<script>
document.getElementById("bold").onclick = function(e) {
document.execCommand("bold", false, "");
};
document.getElementById("italic").onclick = function(e) {
document.execCommand("italic", false, "");
};
document.getElementById("underline").onclick = function(e) {
document.execCommand("underline", false, "");
};
</script>
</body>
</html>
Greetings
Axel
Could be done with jquery using the addClass & removeClass Method
Something like this would be all the code you need:
$( *YourTextElement* ).addClass( "YourCssDefinition" );
This will of course only affect the entire text within the defined YourTextElement
....

Categories