Using JavaScript (or jQuery), create a variable called “myName” and set the value to your “myName”
Create a , that when you click it, it displays an alert with your “myName” variable.
Here is the problem I am currently working. I am super new to this and just trying to figure this out. Here is the code I currently have, when I click the button it displays nothing.
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick=var "myName"Woolley>Button</button>
</body>
</html>
java script
var "myName"
"Woolley"
you can check below code to change the value
<p id="changeName">Mark</p>
<button type="button" class="myevent">Button</button>
<script>
jQuery(function(){
$('.myevent').on('click', function(){
var name = "John Doe";
$('#changeName').val(name);
});
});
</script>
This is Jquery function please inlcude jquery library before use this.
Using pure Javascript:
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<script>
function displayName(){
var myName = "Woolley";
alert(myName);
}
</script>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="displayName()">Button</button>
</body>
</html>
To make the onclick on your button do something, tell the onclick what to do when triggered; In this case, I told it do execute the function myFunction.
In this function, create your variable and alert it using alert()
function myFunction() {
var myName = "Woolley";
alert(myName);
}
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="myFunction()">Button</button>
</body>
</html>
If you don't want to use a function, you can also tell onclick to execute alert() without a function:
<button type="button" onclick="var myName = 'Woolley'; alert(myName);">Button</button>
Please note that you need to use " and ' properly, otherwise your HTML is invalid and can't execute your JavaScript.
Related
I can't figure out how to have a function refer to my button so that I can have my button actually do stuff when I click it. Here is my function:
this.Click = function () {
alert('It works');
}
Here is my button in the return statement:
<button id="button" onClick="Click()">Click me!</button>
Both of these are in a larger function. I keep getting errors about my Click() function and I don't know why!!
[EDIT] I'm in a .js file, not an html file
Please visit https://www.w3schools.com/ and try stuff before asking questions at stackoverflow i got this answer under 3min there
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "It works";
}
</script>
</body>
</html>
Please supply more information if you can.
What you have currently works
this.Click = function () {
alert('It works');
}
<head>
<style>
body{
width:100%;
background-color:tan;
}
#background{
background-color:brown;
padding:2%;
border-radius:10%;
width:10%;
height:20%;
margin-left:40%;
}
#button{
background-color:tan;
padding:2%;
border-radius:10%;
}
</style>
</head>
<body>
<div id="background">
<button id="button" onClick="Click()">Click me!</button>
</div>
</body>
Use this and it will work.
const $button = document.getElementById('button')
$button.onclick = function() {
console.log('clicked');
}
If you want to use on HTML, you need to create the function Click on the js file. Should be like:
js file:
function Click() {
console.log('clicked');
}
html file:
<button id="button" onclick="Click()">Click me!</button>
I'm trying to execute a function by clicking on a span, but it tells me that it is undefined.
$(document).ready(function() {
function callTo(param) {
alert(param);
}
});
.file-up {
background: #f5f5f5 none repeat scroll 0 0;
border: 1px solid #ccc;
color: #383f45;
font-size: 12px;
margin-bottom: 10px;
padding: 6px;
font-size: 10px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
<div>
<span class="file-up" onclick="callTo('test')">Click to call</span>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script>
function callTo(param) {
alert(param);
}
</script>
<div>
<span class="file-up" id="index" onclick="callTo('test')">
Click to call
</span>
</div>
</body>
This is a working example without using jQuery, just by vanilla javascript. Insert it and use it directly.
If you want me to post an answer which uses only jQuery for the stated task that you want to accomplish then please let me know.
This is code using jQuery, as you asked -
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#index').click (function callTo() {
alert("Your values is :"+ $(this).data("value"));
});
});
</script>
<div>
<span class="file-up" id="index" data-value="test">
Click to call
</span>
</div>
Try to move your function definition away from $(documents).ready
<script>
function callTo(param) {
alert(param);
}
</script>
Or define event listener like
<script>
$(document).ready(function() {
$('.file-up').click(function() {
//action
});
});
</script>
(I'd better give it an id in this case and change the selector to #id instead of .file-up because other elements can have the same class applied)
In the html part I don't want to include the events related code, events related code should be in inside the script tag
<!doctype html>
<head>
<style>
div{
width:200px;
background-color:grey;
}
</style>
<body>
<p>use the below area for events</p>
<div> point here </div>
<a id="event_output"></a>
<script>
var output=document.getElementById("event_output").innerHTML;
var div=document.getElementsByTagName("div");
div[0].onmouseover=function(){output="mouse over"}
div[0].onmouseout=function(){output="mouse out"}
</script>
</body>
You are just updating the output variable which is a string. Instead store the object reference and set its innerHTML property.
<style>
div {
width: 200px;
background-color: grey;
}
</style>
<p>use the below area for events</p>
<div>point here</div>
<a id="event_output"></a>
<script>
var output = document.getElementById("event_output");
var div = document.getElementsByTagName("div");
div[0].onmouseover = function() {
output.innerHTML = "mouse over"
}
div[0].onmouseout = function() {
output.innerHTML = "mouse out"
}
</script>
Based on this http://qnimate.com/creating-a-wysiwyg-html-editor/ example created short code
<!doctype html>
<html>
<head>
<title>WYSIWYG Editor</title>
</head>
<body>
<button onclick="displayhtml()">Display HTML</button>
<div class="editor" style="width: 50px; height: 100px; background-color: white; border: 1px solid grey;" contenteditable="true" spellcheck="true">
</div>
<div class="htmloutput">
</div>
<script>
function displayhtml() {
document.getElementsByClassName("htmloutput")[0].textContent = document.getElementsByClassName("editor")[0].innerHTML;
}
</script>
</body>
</html>
On local computer created index file inside wamp/www and pasted the code.
Inside class="editor" typed Enter text Enter. Then clicked on button onclick="displayhtml()"
And i see
<div><br></div><div>text</div><div><br></div>
instead of expected <br>text<br>
Tried here http://jsfiddle.net/24fyrhga/6/
All ok.
Why on local computer i see these divs and how to remove them?
I'd like to display a div on a webpage when a user clicks on a button.
Does someone know how to do this ?
My code, so far, is :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
</head>
<body>
<input id="text" type="text" size="60" value="Type your text here" />
<input type="button" value="When typing whatever text display the div balise on the page" onclick="check();" />
<script type="text/javascript">
function check() {
//Display my div balise named level0;
}
</script>
</body>
</html>
Thanks,
Bruno
EDIT: All my code (I've erased it because it was too long and not very clear)
You can use document.createElement("div") to actually make the div. Then you can populate the div using innerHTML for the text. After that, add it to the body using appendChild. All told, it can look like this:
function check() {
var div = document.createElement("div");
div.innerHTML = document.getElementById("text").value;
document.body.appendChild(div);
}
This will add a div every time the button is pressed. If you want to update the div each time instead, you can declare the div variable outside the function:
var div;
function check() {
if (!div) {
div = document.createElement("div");
document.body.appendChild(div);
}
div.innerHTML = document.getElementById("text").value;
}
If you have the div already in the page with an id of "level0", try:
function check() {
var div = document.getElementById("level0");
div.innerHTML = document.getElementById("text").value;
}
A quick search on google gave me this example:
Demo of hide/show div
The source-code for that example is:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Displaying and hiding div layers through button clicks">
<META NAME="KEYWORDS" CONTENT="Show layer, hide layer, display div, hide div, button on click, button on click event, div property, div style set">
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
<br><br>
</body>
</html>
Paste this code somewhere in your body
<div id="myDiv" style="display:none">
Hello, I am a div
</div>
Add this snippet into your check() function to display the otherwise-hidden content.
document.getElementById("myDiv").style.display = "block";
You could also change the div content programmatically thus:
document.getElementById("myDiv").innerHTML = "Breakfast time";
... would change the text to 'Breakfast time'.
You might want to look into jquery, it'll make your life 100 times easier.
Jquery is a javascript library (script) that you include and it allows you to manipulate the DOM very easily.
Start by adding the latest Jquery to your head which will allow you to use something like $(document).ready( )
The function inside .ready( fn ) is a callback function; it get called when the document is ready.
$("#lnkClick") is a selector (http://api.jquery.com/category/selectors/)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#lnkClick").click( function() {
$("#level0").attr("style", "display: block;width: 100px; height: 100px; border: solid 1px blue;");
});
});
</script>
</head>
<body>
<div id="level0" style="display:none;">
</div>
Click me
</body>
</html>
Of course this code can be made cleaner. You want to check: http://api.jquery.com/click/
There are plenty of examples.
Best of luck with Jquery!
you really should be using jquery , there's a little bit of a learning curve but once you get it, developing web apps is much easier.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function() {
$("#show_div_button").click(function() {
$("#div_to_show").show();
return false;
});
});
</script>
</head>
<body>
Click Me to Show the Div
<div style="display:none" id="div_to_show">I will be shown when the link is clicked</div>
</body>
</html>