<head>
function productName(name)
{
}
</head>
<body>
<img src="...images/car.jpg" onclick="productName('car')">
</body>
What I should write in this javascript function to print the value received from the onclick method to any public place in my html body?
Say you have an element like this:
<div id="content">
</div>
your js function would be like this:
<script type="text/javascript">
function productName(name)
{
document.getElementById('content').innerHTML = name;
}
</script>
You can create a textNode and append it to the body
function productName(name) {
var t=document.createTextNode(name);
document.body.appendChild(t)
}
Demo: Fiddle
Or in jQuery,
$('#content').html( name); // inner HTML of an element, by ID
$('#inputField').val( name); // into an INPUT.
Related
How do I call a javascript function from within razor markup in a cshtml view? Basically I want to do something like this (which doesnt work):
Javascript file being included on the page has a method like this:
<script type="text/javascript">
function doesThisWork() {
return true;
}
</script>
View has code block similar to this:
<div>
#if(doesThisWork()) {
<span> this DOES work!!! </span>
}
else
{
<span> this does NOT work!!! </span>
}
</div>
You cannot call the javascript function on the server side but it can be achieved as below code.
Html:
//Declare a div where you want display html
<div id="bindHtml"></div>
Script:
<script type="text/javascript">
//On pageload call function and display Html based on your function return.
$(document).ready(function(){
let htmlContent = "";
if(doesThisWork()){
htmlContent = "<span> this DOES work!!! </span>";
}else{
htmlContent = "<span> this does NOT work!!! </span>";
}
//Bind Html to declared div in the Html
$("#bindHtml").append(htmlContent);
});
function doesThisWork() {
return true;
}
</script>
There is something wrong with this code.
HTML
<p id = "Krishna"></p>
JavaScript
document.getElementById("Krishna").innerHTML = "Hello"
You are not calling your script in the code above. I use the same code with a function:
<script>
function fun(){
document.getElementById("Krishna").innerHTML = "Hello";
}
</script>
</head>
<body onload='fun()'>
<p id = "Krishna"></p>
</body>
I hope it works for you.
I have the following code and I want to remove placeholder.
<div class="myclass">
<p>[Sitetile][change this too]someothercontent</p>
</div>
and I want to change the above markup to this with some event using jQuery:
<div class="otherclass">
<p>changemaincontentchangesomeothercontent</p>
</div>
Create an object with the index named as the part you want to replace (inside the brackets) and assign the value to it. Then use the $.each-function to iterate over the object and replace the values in the html with the one from the object. After that assign the new html-string to your element.
var change = {
'Sitename': 'yahoo.com',
'Sitetile': 'changemaincontent',
'change this too': 'change'
};
var $elem = $('.myclass > p'); //cache the element
var html =$elem.html(); //get the html-string
$.each(change, function(index, value){ //iterate over the object
html = html.replace('[' + index + ']', value); //replace the values
});
$elem.html(html); //assign the new html-string
Demo
Reference
.replace()
$.each()
.html()
you need to put someothercontent in <span>
HTML
<div class="myclass">
<p>
maincontent
<span>someothercontent</span>
</p>
</div>
Script
$('.myclass').find('a').text('changemaincontent');
$('.myclass').find('span').text('changesomeothercontent');
Demo
You can try some thing like this !!!
<<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='link'><a href='javascript:open_fun()'>OPEN</a></div>
</body>
</html>
<script type="text/javascript">
function close_fun() {
document.getElementById('link').innerHTML = "<a href='javascript:open_fun()'>OPEN</a>";
}
function open_fun() {
document.getElementById('link').innerHTML = "<a href='javascript:close_fun()'>CLOSE</a>";
}
</script>
Hope this helps !!!
I'm writing some simple code to change the visibility of an image when a button is clicked, but my document.getElementById().value is coming up as undefined. (I've tried replacing .value with .display - same result).
What could be the problem?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
function hideImage(imageId){
document.getElementById(imageId).visibility="hidden";
}
function showImage(imageId){
document.getElementById(imageId).visibility="visible";
}
function switchVis(imageId){
var curVis = document.getElementById(imageId).value;
if(document.getElementById(imageId).value=="hidden"){
document.getElementById("output").innerHTML="hidden";
showImage(imageId);
}
else if(document.getElementById(imageId).value=="visible"){
hideImage(imageId);
document.getElementById("output").innerHTML="visible";
}
else{
alert("Visibility Issue!\nVisibility value is " + curVis);
}
}
</script>
</head>
<body>
<img src="images/k3.gif" id="k3"><p>
<button onclick=switchVis('k3')>Visibility</button>
<div id="output"></div>
</body>
You cannot simply get style value by using document.getElementById().value . getComputedStyle() gives the final used values of all the CSS properties of an element. The returned style is a CSSStyleDeclaration object which can be used to get the value of your style. Try follwing code. It should work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
function hideImage(imageId){
document.getElementById(imageId).style.visibility="hidden";
}
function showImage(imageId){
document.getElementById(imageId).style.visibility="visible";
}
function switchVis(imageId){
var curVis = document.getElementById(imageId); //your element
style = window.getComputedStyle(curVis); //returns CSSStyleDeclaration object
curVis = style.getPropertyValue('visibility'); //now get your css value
if(curVis=="hidden"){
document.getElementById("output").innerHTML="visible";
showImage(imageId);
}
else if(curVis=="visible"){
hideImage(imageId);
document.getElementById("output").innerHTML="hidden";
}
else{
alert("Visibility Issue!\nVisibility value is " + curVis);
}
}
</script>
</head>
<body>
<img src="images/k3.gif" id="k3" value="check"><p>
<button onclick="switchVis('k3')">Visibility</button>
<div id="output"></div>
</body>
You can get visibility like that: jsfiddle
So it's in document.getElementById('myId').style.visibility
//to make visible
document.getElementById('myId').style.visibility='visible'
//to make hidden
document.getElementById('myId').style.visibility='hidden'
Instead of value you used there's innerHTML. Value is for input elements.
try this
to show
document.getElementById('k3').style.visibility='visible';
to hide
document.getElementById('k3').style.display='none';
refer this for better idea
Add visibility property in img tag.
visibility="visible"
2.Also check visibility value with following.
document.getElementById(imageId).style.visibility=="visible"
Use same thing in hideImage and showImage function.
I have a number of links, that when clicked on, passes a variable thru to another portion of the page.
Yet, for some reason, I can’t figure it out! What am I missing?
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
return myid;
}
</script>
</head>
<body>
Click Me<br />
<script type="text/javascript">
document.write(myid);
</script>
</body>
You are getting a little mixed up here. Even though the function returns a value, it has nothing to return it to. Try this:
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
document.getElementById("debug").innerHTML = myid;
}
</script>
</head>
<body>
Click Me<br />
<div id="debug"></div>
</body>
if you want to use it later you need to declare myid as a global variable. its scope is currently only within myFunction. also the document.write() function will only execute at runtime so you need to have another function the executes that with every click, or just combine the two.
When you click the link all that happens is that the myFunction() is called which returns the string. The line document.write(myid); is not executed anymore so nothing is visible.
<script>
// This is global
var myid = ''
myfunc = function(a){
myid = "Hi There!" + a;
alert(myid);
}
test_global = function(){
alert(myid);
}
</script>
Set MYID
<input type="button" onclick="test_global();" value="Test MYID" />
Here is a simple example of some similar stuff:
clickme or ClickMeAlso
<input id='other' type='text'/>
<script>
function myfunc(a) {
return a + " howdy";
};
</script>
You can see this in action here:http://jsfiddle.net/5Sbn2/