So, i tried changing a p element by calling function through getElementById(). But when i click the button nothing happens.
when i click the button it should change car brands to the length of the string and and also add lamborghini.
Here's the code:-
<html>
<head>
<script src="javascript_file.js" type="text/javascript"></script>
</head>
<body>
<h1>strings and functions</h1>
<p id="pFunction">hi</p>
<button type="button" onclick="document.getElementById('pFunction').innerHTML = 'bye'">click!</button>
<p id="slice">car brands</p>
<button onclick="sliceF">Click it!</button>
</body>
</html>
Js:-
function sliceF(){
var cars = "bmw , lamborghini , toyota";
var lengthCars = cars.length;
var sliceCars = cars.slice(6 , 16);
document.getElementById('slice').innerHTML = "the length of the string is " + lengthCars + "<br/>" + "the brand in the middle is " + sliceCars;
}
change "sliceF" to "sliceF()"
is it working now.?reply if not working..
you have forgott the brackets for function call:
<html>
<head>
<script src="javascript_file.js" type="text/javascript"></script>
</head>
<body>
<h1>strings and functions</h1>
<p id="pFunction">hi</p>
<button type="button" onclick="document.getElementById('pFunction').innerHTML = 'bye'">click!</button>
<p id="slice">car brands</p>
<button onclick="sliceF()">Click it!</button>
</body>
</html>
https://jsfiddle.net/
I think you just need to change
onclick="sliceF"
to
onclick="sliceF()"
Related
I'm creating a web page that has a text area in it and the user can enter code and have it displayed underneath. If I place my function in the HTML file it works just fine but when I move it to the JS file it doesn't work. Any help, even pointing me in the direction of my issue would be appreciated.
Here is my HTML code with the function commented out......
<!DOCTYPE html>
<html>
<head>
<title>DOM TREE 2</title>
<link rel="stylesheet" href="css/Content.css">
<script type="text/javascript" src="JS/js01.js"></script>
</head>
<body style="background-color:lightgray" id="bd">
<div id="third">
<h1> DOM TREE <img src="Images/tree_logo.jpg" alt="Calc" id = "pic">
</h1>
<form id="DOMForm">
<textarea id="myTextarea" rows="4" cols="50"></textarea>
<p><button type="button" onclick="AddFunction()">Add Content</button>
<button type="button" onclick="Change()">Change Style</button>
<button type="button" onclick="Clear()">Clear Content</button>
</p>
<p id="demo"></p>
<!--<script>
function AddFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
</script> -->
</body>
</html>
Here is the JS file with the function.....
function AddFunction()
{
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
function changestyle()
{
}
function clear()
{
document.getElementById("DomForm").reset();
}
Because names are different, compare onclick="Change()" to function changestyle() and onclick="Clear()" to function clear().
<!DOCTYPE html>
<html>
<body>
<h2>DATE&TIME</h2>
<button type="button"
onclick="document.getElementById('sun').innerHTML = Date()">
View Date</button>
<p id="sun"></p>
<button type="button"
onclick="document.getElementById('sun').innerHTML = '
'";"document.getElementById('sun1').innerHTML = 'Press to
View'";>Clear</button>
<p id="sun1"></p>
</body>
</html>
I want to perform two action while button is clicked. My above code was not work. Please give solution.
If you have more than 1 lines go separate user define function using script tag
<!DOCTYPE html>
<html>
<head>
<script>
function clearbtn(){
document.getElementById('sun').innerHTML ='';
document.getElementById('sun1').innerHTML = 'Press to View';
}
function dateTime(){
document.getElementById('sun').innerHTML = Date();
document.getElementById('sun1').innerHTML = '';
}
</script>
</head>
<body>
<h2>DATE&TIME</h2>
<button type="button" onclick="dateTime()">View Date</button>
<p id="sun"></p>
<button type="button" onclick="clearbtn()">Clear</button>
<p id="sun1"></p>
</body>
</html>
Just call a local javascript function
<button type="button" onclick="myFunction();">Clear</button>
<script>
function myFunction()
{
document.getElementById('sun').innerHTML = '';
document.getElementById('sun1').innerHTML = 'Press to View';
}
</script>
First of all, avoid inline javascript !
Gives your button an unique ID
<button type="button" id="datebutt">View Date</button>
<p id="sun"></p>
<button type="button" id="clearbutt">Clear</button>
<p id="sun1"></p>
Then in your script you can do
<script>
document.getElementById("datebutt").addEventListener("click",function(){
document.getElementById('sun').innerHTML = Date()`
},false);
document.getElementById("clear").addEventListener("click",function(){
document.getElementById('sun').innerHTML = '';
document.getElementById('sun1').innerHTML = 'Press to View';
},false);
</script>
I have the best solution for this
In js page :-
function do(){
// your code here
}
function do_more(){
// your code here
}
In Html page :-
<button onclick='do();do_more();'>Button</button>
I wrote these few lines of code and would like the text to change once the button is pressed but its not working. Could you please find out the problem?
var omari = "Omari Lamar";
function omari (){
el = document.getElementById('slice');
el.textContent = omari + "Is a computer Programmer!";
}
<html>
<head>
<title></title>
</head>
<body>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
<script src="app.js"></script>
</body>
</html>
Change the code to:
var omariName ="Omari Lamar";
function omari (){
el = document.getElementById('slice');
el.textContent = omariName + "Is a computer Programmer!";
}
Here you go, Your function name and variable name were the same
var omary ="Omari Lamar";
var omari = function(){
var el = document.getElementById('slice');
el.innerHTML = omary + "Is a computer Programmer!";
};
<html>
<head>
<title>
</title>
<script src="app.js"></script>
</head>
<body>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
<script src="app.js"></script>
</body>
</html>
this is the problem:
you have a variable named omari and a function name omari. so, when you try calling the function omari, javascript actually looks at the variable definition, and not the function. just give them different name.
try the code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<script>
var _omari ="Omari Lamar";
function omari(){
el = document.getElementById('slice');
el.innerHTML = _omari + " Is a computer Programmer!";
}
</script>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
</body>
</html>
I have a JavaScript function that uses document.write() to write to the page. My issue is that when I click the button to call the function, document.write() replaces what I already had with what I am writing. Is there a way to write text to a specific div from JavaScript?
Here is my HTML code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js">
</script>
<script>
// Calling the Google Maps API
</script>
<script>
<!-- JavaScript to load Google Maps -->
</script>
</head>
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>this -->
<div id="bottom_pane_options">
<button onclick="todaydate();">Try It</button>
</div>
</div>
</body>
...and my JavaScript code (something I got from the internet just to test):
function todaydate() {
var today_date = new Date();
var myyear = today_date.getYear();
var mymonth = today_date.getMonth() + 1;
var mytoday = today_date.getDate();
document.write("<h1>" + myyear + "/" + mymonth + "/"+mytoday + "/h1">);
}
I would like the text to be right below the button. Any help would be appreciated.
Thanks,
Josh
You should avoid document.write. You'd better put your results to another div:
<div id="bottom_pane_options">
<button onclick="todaydate();">Try It</button>
<div id="results"></div> <!-- Added div ! -->
</div>
Then
function todaydate() {
var today_date=new Date();
var myyear=today_date.getYear();
var mymonth=today_date.getMonth() + 1;
var mytoday=today_date.getDate();
document.getElementById('results').innerHTML ="<h1>" + myyear + "/" + mymonth + "/" + mytoday + "</h1>";
}
As you can see, we're writing the results to the results div with .innerHTML.
Hope this helps. Cheers
HTML Code:
<div id="someclass"></div>
JS:
document.getElementById("someclass").innerHTML="<h1>some thing you want</h1>";
To write into a div do the following:
Step-1: Give div an id or classname
<div id="txt"></div>
Step-2. Use .innerHTML in the function:
document.getElementById('txt').innerHTML="HELLO";
You can simply try this...
<!doctype html>
<html>
<head>
<script type="text/javascript" >
function load() {
var div = document.getElementById('data');
div.innerHTML = div.innerHTML + "Write your New Data" + "<br>";
}
</script>
<body onload="load()">
<div id= "data">
Hello... I am old
</div>
</body>
</html>
I am calling this on onload() function you can call as per your beed
You need to tell Javascript to perform the action onload... Try with this:
<script type ="text/javascript">
window.onload = function sayHi(){
document.getElementById('hi').innerHTML = 'Hi';
};
</script>
then on your HTML:
<span id="hi"></span>
It always seems to be a problem and I fail to see why, I'm trying to change element p text by using his ID, element p id="para1" is inside PostEditor.html:
The elementID I want to change is para1 in the following html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
The following function is issued by a click on a link inside index.html and displaying the page you are seeing above and is then supposed to change its content:
From index.html I issue the function from link:
<a onclick="postEditing()"> Edit</a>
This line issue the following function:
function postEditing()
{
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.document.getElementById("para1").innerHTML = "11111111111";
result.document.getElementById("para1").innerText = "11111111111";
result.document.getElementById("para1").value = "11111111111";
}
As you can see I tried three methods. I'd never understand what is the difference between them, but I tried all three and none worked!
It's because you're searching the document of the window which shows the index.html, not the document of the newly opened window. try following:
...
var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
editorWindow.document.getElementById("para1").innerHTML = "11111111111";
...
EDIT:
NOW i see the problem: in the function you're trying to access a property of the parameter element, but you don't pass a value for it. So this will end in an error because the accessed object is undefinded!
So you have three options to get it working:
test the parameter (always a good idea): var ID = null; if(element) ID = element.id;
pass a value: <a onclick="postEditing(this)"> Edit</a>
remove the line var ID = element.id;
SOLUTION: (TESTED)
I could not really say why, but the index.html found the para1 and can successfully set the new text. But somehow the new window will reinitialize the old value again.
So you have to do the changing in an handler you run at onLoad:
index.html:
<html>
<head>
<script>
function postEditing() {
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.onload = function() {
result.document.getElementById("para1").innerHTML = "11111111111";
}
}
</script>
</head>
<body>
<a onclick="postEditing()"> Edit</a>
</body>
</html>
PostEditor.html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I'm fairly sure you will need to query the return result of calling window.open like this:
function postEditing(element)
{
var ID = element.id;
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.getElementById("para1").innerHTML = "11111111111";
result.getElementById("para1").innerText = "11111111111";
result.getElementById("para1").value = "11111111111";
}
[Untested though]
Your button type is submit, which is posting the form. The object is changing in the DOM, only after the script runs, the DOM is reloaded back to it's original state. Try changing your button type to "button", and you should see the P element change appropriately.
Edit: Here's the HTML I used to determine the above. Keeping the button as "submit" caused me to see the text change and then swap back. The HTML below should keep the text in place. HTH!
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script>
function postEditing(element)
{
document.getElementById('para1').innerHTML = "asdafs";
}
</script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="button" onclick="postEditing('caller')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>