I have a JS table generated by the data entered in textareas by users on my web site (so the data is not there when you first load the page: your have to enter something in the textarea and then generate the table). Now I'm trying to get that data (from the generated table) and show it in a (h2/) for exemple.
So I made a script to get that information:
<script type="text/javascript">
function buttonTEST()
{
document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
}
</script>
and a Button to use that script:
<input id=GetTest type="button" onclick="buttonTEST()" value="TEST ME"/>
When I enter the "document.getElementById....etc" in the console, it shows the data that I want so I think the script is fine.
But how can I get it to SHOW that data (alphanumeric) in a (h2) plain text?
Can someone help? :)
EDIT! I tried this:
<div>
<script type="text/javascript">function buttonTEST(){document.getElementById("yourID").innerHTML="document.getElementById('excel_table1').getElementsByTagName('tr').
[0].cells[1]";
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
But when I click, I just get "document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1]" as a H2.
The problem in your case, seems to be the extra " around your expression to get the value.
If a value is already a string, you don't need to wrap it in quotes, since doing so makes javascript think that you want to litteraly write that piece of code to the h2 output
<div>
<script type="text/javascript">
function buttonTEST() {
document.getElementById("yourID").innerHTML = document.getElementById('excel_table1').getElementsByTagName('tr').
[0].cells[1].innerHTML;
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
Ok, solved it ! Thanks everybody for putting me in the right track :D
So, what worked for me:
<script type="text/javascript">
function buttonTEST()
{
document.getElementById('yourID').innerHTML=document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
#vhoyer was right, I needed to take off the extra " otherwise JS thinks that I want to litteraly write that piece of code to the h2 output.
And the other think is that I needed to put ".innerHTML" again after all my tr and cells (yes, it makes a .innerHTML inside another .innerHTML xD )
Hope that might help someone!
Cheers
You need to create a <h2> element in your html file to replace its value (which should be empty in your html file) using javascript.
Make sure you have assigned that <h2> an id.
Then, using document.getElementById, access it in your script and change it.
An example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME"/>
<script>
function buttonTest() {
//Grab the ID and change it
document.getElementById("yourID").innerHTML = "whatever you want it to display";
}
</script>
</body>
</html>
Also, make sure to surround the html attributes' values in single or double quotes.
Edit:
Here is an example for your use case:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME" />
<p>Press me to find out the second cell in the second row</p>
<table id="table">
<tr>
<th>Color</th>
<th>Object</th>
</tr>
<tr>
<td>Red</td>
<td>Poppy</td>
</tr>
</table>
<script>
function buttonTest() {
//Here we grab the value of the second cell in the second row in a variable called value. You can change the row and cell index to access specific values.
var value = document.getElementById("table").rows[1].cells[1].innerHTML;
//Then we display it
document.getElementById("yourID").innerHTML = value;
}
</script>
</body>
</html>
Related
I working on displaying information when we press a radio button. I wanted to display an image in addition to this, so I did the following, but the text appears well, but the image is not displayed. What should I do?
The image will look like this:
my project path
html
<form name="image_type">
<input type="radio" name="check_img" value="눈" onclick="eyesinfo()" /><span>눈</span
</form>
<p class="disease-information"></p>
<script>
function eyesinfo(){
var info = "sometext<br><img src='images\earsexample.jpg'>";
$('.disease-information').html(info);
}
</script>
Please use below code it will work for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form name="image_type">
<input type="radio" name="check_img" value="눈" onclick="eyesinfo()" /><span>눈</span>
</form>
<p class="disease-information"></p>
<script>
function eyesinfo(){
var info = "sometext<br><img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'>";
$('.disease-information').html(info);
}
</script>
</body>
</html>
Make sure to add a real image path for the attribute of img.
var info = "sometext<br><img src='https://freeiconshop.com/wp-content/uploads/edd/eye-outline.png'>";
$('.disease-information').html(info);
Please change your script as follows:
<script>
function eyesinfo(){
let img = document.createElement("img");
$(img).attr("src","https://petokala.com/images/logo.png");
$(".disease-information").html('');
$(img).appendTo($('.disease-information'));
}
</script>
I have this text field hidden with HTML hidden code, now when the user enter an invalid input I use javascript to unhide the text field and display an error message, this is what is suppose to happen.
I have seen a lot of css style like
`style.visibility = 'visible';` and `style.display='block';`
But none of them are working for me what happens is that the error text shows for less than a second and then disappears, any one would like to share their thoughts.
This is the complete code for better understanding, it's still not working in firefox and Edge while IE and Chrome wont do anything, in Firefox, it just blinks once on each button press and that about it.
Javascript:
</script>
function validate(){
var firstname = document.getElementById("fn").value;
if (firstname == "") {
document.getElementById("fn").style.visibility = "visible";
document.getElementById("fn").text = "ERROR";
}
}
function init()
{
var formData = document.getElementById("enqForm");
formData.onsubmit = validate;
}
window.onload = init;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts.js"></script>
</head>
<body>
<form id="enqForm">
<input id="fn" type="text" placeholder="First Name *" />
<input id="sendbutton" type="submit" value="Enquire" />
</form>
</body>
</html>
Instead of changing the style, you can change the form's type attribute.
Using JavaScript - assuming you want to change lnspan to text:
document.getElementById('lnspan').type = 'text';
Style is not the same as the type attribute.
Also there's two id attributes in your <input>, you may want to change that.
**THAT IS THE ANSWER TO YOUR QUESTION**
<html>
<head>
<script>
function newDoc() {
document.getElementById("hid").type="text";
document.getElementById("hid").value="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<input type="hidden" id="hid" value="">
</body>
</html>
<!--However this makes your error message as text field which is not good.
What you can do is make the Error into embedded into paragraph <p> so the
users cannot change it and it also looks more professional
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
document.getElementById("te").innerHTML="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<p id="te">
</body>
</html>
I have 2 php pages
home.php
about.php
I have 1 Javascript page, which I called javascript from home.php.
I want to access the value of the p tag in about.php.
home.php
<!DOCTYPE html>
<html>
<body>
<input type="submit" onclick='myfunction()'>
</body>
</html>
javascript
<script>
function myfunction()
{
}
</script>
about.php
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
<p id='demo'>i want to access this value in javascript function</p>.
</body>
</html>
You probably want something in pure javascript like:
<script>
document.getElementById('demo').innerHTML='change the p tag value';
</script>
function myfunction(){
var val= document.getElementById('demo').textContent;
alert(val);
}
FIDDLE
var pTag = document.getElementById('demo').innerHTML;
The variable pTag will now hold the value(text) of your "demo" tag,
ready for you to do what you wish with it.
EDIT:
Using Javascript, set the value of a hidden form field when you change the contents of your tag.
Then pass the values using php, like below...
home.php:
<form action="about.php">
<input type="hidden" name="demo" id="demo" />
<p id="pDemo"> </p>
<button type="submit"></button>
</form>
Then in about.php:
<p id='demo'>
<?php
$demo= $_GET['demo'];
//use your variable "demo'
?>
</p>
This link should help, here.
You can use ajax or you can use load of jquery.
<script>
$(document).ready(function() {
$("#bAdd").load("about.php",function(response,status,xhr){// use if less data to load
var pTag = document.getElementById('demo').innerHTML;
alert(pTag);
});
});
</script>
<input type="hidden" id="bAdd" value="">
i have problem on sending textbox value from one html page to another html page.
In first page i am sending first name and last name values.and i want to catch this value in textbox on the second page( i.e home.html).but some erroe occurs.
error is :Uncaught TypeError: Cannot set property 'value' of null
how to solve? please tell me.
i know this stupid question.but please tell me guys.i don't know javascript.
this is my html code:
<!DOCTYPE html">
<html>
<head>
<script src="ttt.js"></script>
</head>
<body>
<form method="get" action="home.html" name="ff">
Firstname: <input id="f" type="text" name="firstname1">
Lastname: <input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>
this is my home.html code:
<!DOCTYPE html">
<html>
<head>
<script src="ttt.js"></script>
<script Language="JavaScript">
var tttt=val();
document.getElementById('text').value=tttt;
</script>
</head>
<body>
<form name="ff">
<input id="text" class="text" type="text" name="MyValue" value="helloS"/>
</form>
</div>
</body>
</html>
this is my javascript code(ttt.js)
function val(){
var link=location.href;
var str=link.split('?');
var str1=str[1].split('&');
var str11=str1[0].split('=');
var str12=str1[1].split('=');
var temp=str11[1]+" "+str12[1];
return(temp);
}
Put your javascript at the end of your html and change document.getElementById('tr') to document.getElementById('text'). You have no element with id tr.
please look at this question and its answers, it is demonstating how to pass value from one html page to another
link
You have to do getElementById('tr') when the dom is ready and ensuring that an element with the ID exists.
I am trying to make this code work, I want the innerHTML to be changed but It's instantly changing and gets back to its initial state . Any help ?
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td>
<div id="text_this">123</div>
</td>
<td>
<button onclick="click_me();">Edit</button>
</td>
</tr>
</body>
</html>
Your form is getting submitted. Add a return false; to your button onclick event.
<button onclick="click_me(); return false;">Edit</button>
Or, make the button type='button' (This is the better option)
<button onclick="click_me();" type='button'>Edit</button>
The reason is because the button type is submit by default if a type is not specified.
From MDN,
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td><div id="text_this">123</div></td>
<td><button onclick="click_me();return false;">Edit</button></td>
</tr>
</table>
</form>
</body>
</html>
added a return false statement to the onclick event. without it, the form gets submitted and the page reloads
jsfiddle here