I'm pretty new with coding, so bear with me. I've got a button on a page that, if I press on it, should make the specific text bold.
But for some reason it doesn't work and I have no clue why..
Here is an example:
HTML
<input type="button" class="btn" onclick="boldtext();" />
<br />
<div id="text">This is some text</div>
Javascript
function boldtext () {
document.getElementById('text').style.fontWeight = 'bold';
}
My problem is when I click on the button, nothing happens.
Did I make a mistake somewhere?
Write the JavaScript code in <head> tag.
Your code is working. See DEMO
If you wish to use jQuery you should create an event handler instead of using inline events
HTML
<input type="button" class="btn" id="your_button" />
<br />
<div id="text">This is some text</div>
JS
$('#your_button').click(function(){
$('#text').css('font-weight','bold');
});
Simplest jQuery solution would be
function boldtext () {
$('#text').css('font-weight','bold');
}
OR
You can make use of jQuery event handler.
$('input.btn').click(function(){
$('#text').css('font-weight','bold');
});
hope you have wrapped the above script inside <head>
<head>
<script>
function boldtext () {
document.getElementById('text').style.fontWeight = 'bold';
}
</script>
</head>
Related
I'll make it quick. I researched a lot but I'm not sure why this is not working.
I have a textarea tag which I want to set to 'data-something' tag using setAttribute("data-something","") command and it works just fine if I just list it out there. However what I'm doing is I"m creating a button that when clicked sets the attribute of the textarea to 'data-something', and no matter what it fails to operate when I nest setAttribute inside a myFunction and set button onclick="myFunction()". I'd appreciate if someone could explain a workaround that.
Thanks a ton for your patience.
This is what works:
<textarea></textarea>
<script>
textarea.setAttribute("data-something","")
</script>
This is what doesn't work
<textarea></textarea>
<button onclick="myFunction()"></button>
<script>
function myFunction(){
textarea.setAttribute("data-something","")
}
</script>
You have to give you element a handle getElementById then make the change
function myFunction(){
let textarea = document.getElementById("Foo");
textarea.setAttribute("data-something","This is the set Data");
console.log(textarea);
}
<textarea id="Foo"></textarea>
<button onclick="myFunction()">Click me</button>
So I am thinking something similar to how you in php can just run a function within a html element and that way get it to echo something in the html element.
Is there a way to choose a specific place for javascript to write with for example .innerHTML or .createTextNode?
What I wanna do is to add contenteditable="true" within a html element onclick of another button.
The reason I wanna do this is because I have a paragraph that should become editable only after onclick of a button.
I apologize that I haven't put in any code for an example, but I don't really think that is needed, as it would only be a paragraph and a button, as I don't know how the javascript should be written.
With a simple js onclick event you can do this
onclick="document.getElementById('p').setAttribute('contenteditable', true);"
here's a fiddle for this.
I'm assuming you mean something like this:
HTML
<textarea id="c" readonly>Some data</textarea>
<button id="a">
Make editable
</button>
Javascript (with jQuery)
$("#a").on('click', function() {
$("#c").attr('readonly', false);
});
$(function() {
$("#myButton").click(function() {
$("#myDiv").prop("contenteditable", true);
});
});
#myDiv{
height:300px;
width:300px;
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>
<button id="myButton">Enable content Editable</button>
see with http://api.jquery.com/attr/#attr2 & https://api.jquery.com/click/
for exemple:
$( "#target" ).click(function() {
$("#yourId").attr("contenteditable", true);
});
I have a problem with my cancel submit code.
I have used the javascript code for canceling/stopping the submit function on my page but it's not working properly.
It is working in some point but it's not enough.. I'm looking for a solution to this problem please try to help me..
Here's my code for stopping the submit function..
<script language="JavaScript">
function mySubmit(evt)
{
evt.preventDefault();
try
{
someBug();
}
catch (e)
{
throw new Error(e.message);
}
return false;
}
}
</script>
And in form
<form id="form1" runat="server" onsubmit="return mySubmitFunction()">
At first it seems that it's working properly because my page is not blinking or refreshing after I click a button but suddenly I noticed that the page is still refreshing but its not blinking .. look at this screenshot
Notice that the logo is loading after I click the move to left button? look at the red line with arrowhead ..
So I tried to use the onclientclick function and put the return mySubmitFunction in it but same result
Here is the code
<asp:Button ID="Button2" runat="server" Text=">>>"
CssClass="button button-primary"
onclick="Button2_Click" onclientclick="return mySubmitFunction()" />
hope you can help me with this thank you i'm new to javascript ^_^
I'm using ASP.NET C#
Ignore the total data in the screenshot ^_^ I didn't click save that's why its not updating yet..
Check this Example..specify event in onclick onclick="mySubmitFunction(event)"
<!DOCTYPE html>
<html>
<body>
<a id="myAnchor" onclick="mySubmitFunction(event)" href="http://w3schools.com/">Go to W3Schools.com</a>
<p>The preventDefault() method will prevent the link above from following the URL.</p>
<script>
/*document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});*/
function mySubmitFunction(event){
alert(event)
event.preventDefault();
}
</script>
</body>
</html>
I see that in the tags you said you use jquery, this can be done easy with jquery instead pure javascript, hre you have an example.
http://codepen.io/xploshioOn/pen/ogJWKp
html
<form id="form1">
<input type="text">
<input type="submit">
</form>
jquery
$('#form1').submit(function(e){
e.preventDefault();
alert("asd");
});
the alert is just to be sure the function is executing...
I have a page in which buttons are dynamically generated by PHP based on a MySQL table. Each button is inside an anchor tag. When the anchor tag is clicked, it calls a Javascript function which performs several operations.
For one of these operations, I need to get the value of the button and pass it as a parameter. AFAIK, I can't use an ID because the buttons are dynamically generated and there may be any number of them.
Here's the button/anchor code:
<button type="button" class="regbutton" value="'.$row['instance_id'].'">'.$row['DATE'].'</button></span>';
It seems that jQuery functions like .next() only apply to sets of elements like li as opposed to two dissimilar element types. Any ideas?
Maybe it's not valid HTML, but you can make it work.
I made a JSFiddle example, by selecting the button element of the children i retrieve the value.
<script>
function updateDetails(a, b, c){
alert(c);
}
</script>
<button type="button" class="regbutton" value="test">click</button>
I hope this solution fits for you :).
Stefan
I hope this works fine if you are using JavaScript.
<!DOCTYPE html>
<html>
<head>
<script>
function test()
{
alert("Hiii");
var x=document.myForm.click.value;
alert(x);
}
</script>
</head>
<body>
<form name="myForm" action="html_form_action.asp" method="get">
<input type="button" name="click" value="click" onclick="test()"/>
</form>
</body>
</html>
I'm having a problem with the click() functon. It does not work in Opera.
I am trying to make a input type=file clicked on onclick event of another element. I need to style my input type=file element so I made it invisible and replaced it with simple styled button. Now I want file element to be clicked when button is clicked.
I can't use jQuery because I am using the MooTools library for a calendar in my page and it makes conflict when I try to use jQuery. I also tried to avoid the conflict using jQuery.noConflict(); but I could not do it because I am new to jQuery. Here is my html code:
<input name="myfile" id="uploadme" type="file" style="visibility:hidden; width:1px;" onchange="this.form.submit()"/>
<input type="button" id="clickme" onclick="show_upload()"/>
And here is my JavaScript code:
function show_upload()
{
document.getElementById('uploadme').click();
}
I also tried this jQuery code but I could not make it work without conflict with the MooTools library:
jQuery.noConflict();
(function($){
$('#clickme').click(function($){
$('#uploadme').click();
})(jQuery);
});
input[type=file] is very peculiar input type, you can't really do a whole lot with it, primarily for security reasons.
I'm guessing here, but do you perhaps want you own styled upload button? In that case I must disappoint you, you can't do it with HTML. You'll either have to use HTML5 or Flash (like SWFUpload)
It's an Opera bug, but there is possibility to get the result by a different way, using <label> tag:
<input type="file" id="file" style="position: absolute; visibility: hidden;">
<label for="file" id="file-label"></label>
<a onclick="$('#file-label').click()">Browse..</a>
I'm not sure for the input click (it might just be impossible due to security reasons), but your jQuery code is not completely correct.
jQuery.noConflict();
(function($){
$('#clickme').click(function(){ // The $ is not necessary - you already have it
$('#uploadme').click();
}); // You should remove (jQuery) because you don't want to call the function here
})(jQuery); // you need (jQuery) to actually call the function - you only defined the function
Anyway, this answer says you cannot do what you want in Opera: In JavaScript can I make a "click" event fire programmatically for a file input element?
it's not impossible:
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);
But somehow it works only if this is in a function which was called via a click-event.
So you might have following setup:
html:
<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">
JavaScript:
function openFileChooser() {
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function()
{
document.getElementById('input_img').dispatchEvent(evObj);
},100);
}
Hmm...this works for me. In Chrome.
<input type='file' id='csvfile' onclick='reset_upload()' />
where reset_upload() is a jQuery function.
It's impossible to click that button using JavaScript (like friends have said) but see this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>
</head>
<body>
<input type="file" id="first" style="width:200px; background-color:red">
<input type="file" id="second" style="width:200px; background-color:green; position:relative; left:-100px; opacity:0">
<script>
document.getElementById("first").onchange = function(){alert("first")}
document.getElementById("second").onchange = function(){alert("second")}
</script>
</body>
</html>
You can do something like that.
Only problem is that you have to know dimensions of these inputs. Hm... Maybe it's not problem. You can set dimensions. :>