Using data-* with javascript [duplicate] - javascript

This question already has answers here:
Access 'data-' attribute without jQuery
(5 answers)
Closed 8 years ago.
I am learning javascript and trying to store the value 2 in data-value in img element, and when I press the image I want to use javascript to show that value(2) in a paragraph. Here's my code:
<!DOCTYPE html>
<html>
<head>
<script>
function ispisi() {
var x = document.getElementById("myimage").data-value;
document.getElementById('demo').innerHTML = x;
}
</script>
</head>
<body>
<img id="myimage" data-value="2" onclick="ispisi()" src="bulboff.gif" width="100" height="180" />
<p id="demo">Text here<p>
</body>
</html>
The value should show in paragraph p, but when I click the image "text here" stays, insted. Why is this code not working?

try this
var x = document.getElementById("myimage").dataset.value;
OR
var x = document.getElementById("myimage").getAttribute("data-value");

The proper way to do this would be as follows:
function ispisi() {
var x = document.getElementById("myimage").getAttribute('data-value');
document.getElementById('demo').innerHTML = x;
}
window.onload = function() {
document.getElementById('myimage').onclick = ispisi;
};

Related

I'm trying to increase a value when clicking and value returning NaN [duplicate]

This question already has answers here:
why the result is NaN?
(4 answers)
Closed 1 year ago.
I've tried a lot of stuff, however I don't know any JavaScript. All of the JavaScript in the code is copied from stack overflow and other sources. The only thing I know how to use is HTML and I'm still very new. (it might also include some CSS which I also don't know at all)
The <!--<button id="bigButton" onclick="bigBottlePress()"><img src="Images/BigBottle.png"></button>--> is a failed thing so ignore it lol.
<html>
<head>
<meta charset="utf-8">
<title>Bottle Clicker</title>
</head>
<body>
<img src="Images/BigBottle.png" height="500">
<!--<button id="bigButton" onclick="bigBottlePress()"><img src="Images/BigBottle.png"></button>-->
<br>
<br>
<input type="text" id="hydrationLevelDisplay" placeholder="Hydration Level: " disabled style= text-align:center>
<script>
var hydrationLevel = 0
function bigBottlePress() {
var hydrationLevel = hydrationLevel + 1
document.getElementById("hydrationLevelDisplay").value = "Hydration Level: " + hydrationLevel;
document.title = "Hydration Level: " + hydrationLevel;
}
</script>
</body>
</html>
You have already declared hydrationLevel outside function, so don't need to redclare it. Just change,
var hydrationLevel = hydrationLevel + 1
to
hydrationLevel = hydrationLevel + 1
create a button -> id:btn
create a result div or p or h1 -> id:hydrationLevel
select the button, add event listener
document.getElementById('btn').addEventListener('click', incrementLevel)
let hydrationCount = 0;
function incrementLevel() {
hydrationCount += 1;
document.getElementById('hydrationLevel').textContent = hydrationCount;
}
I'd encourage you to use event listeners this way. not inline that's why I provided this solution.

How do I get text in HTML and replace it in my Javascript variable? [duplicate]

This question already has answers here:
How do I replace a bit of text with string variable in javascript?
(2 answers)
Closed 7 years ago.
On click I'm getting text in HTML. I have a variable in Javascript called content I want to get the text input and change a part of the Javascript variable.
HTML CODE:
<html>
<head>
<link href="latent.css" rel="stylesheet">
</head>
<body>
<button onclick="makePage()">Generate Link</button>
Image link: <input type="text" name="img" id = "img"><br>
Content: <input type="text" name="content" id = "content"><br>
<script src="makePage.js">
</script>
<script>
var img = document.getElementById("img").value;
var content = document.getElementById("content").value;
</script>
</script>
</body>
</html>
JAVASCRIPT CODE:
function makePage(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
alert("webpage " + xmlhttp.responseText + " was successfully created!");
}
var content = '<html><head><meta name="something:something" content=""></head><body></body></html>';
xmlhttp.open("GET","http://ahansabharwal.com/makePage.php?content=" + content, true);
xmlhttp.send();
}
In the variable called content I want to replace the image link in the content of the twitter:image
meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg"
AND
I would like to replace the content of the meta name="twitter:description" content="NEWARK - The guest list and parad[....]
with the content inputted by the user.
I solved it by using replace();
What I did was:
var contentJS = document.getElementById('contentInput').value;
var contentNew = content.replace("info", contentJS);
I replaced the context to just info. Now it stores the value of the user input, then searches for the value of 'info' in the string. When it finds it, it simply gets replaced with the user input (contentJS)

Two different ways of function calling in JavaScript [duplicate]

This question already has answers here:
Setting a variable equal to a function without parenthesis? [duplicate]
(3 answers)
Closed 8 years ago.
In the following code, once I run it, it waits for click event to fire an alert. However if I change the following javascript code
from
clickMeButton.onclick=runTheExample;
to
clickMeButton.onclick=runTheExample();
it always fires up an alert when page downloaded without any click event. I would like to know what is the difference. I am using Chrome. Snipped code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
<script type="text/javascript" src="script13.js"> </script>
</head>
<body>
<h1 id="title">DOM Example </h1>
<p id="first">This is the first paragraph</p>
<p id="second"><strong>This is the second paragraph</strong></p>
<p id="third">This is the third paragraph</p>
<input type ="text" id="myTextBox" />
<input type ="submit" id="clickMe" value="Click Me!"/>
Google!
</body>
</html>
//script13.js
window.onload= function(){
var clickMeButton=document.getElementById('clickMe');
clickMeButton.onclick=runTheExample;
}
function runTheExample(){
alert('running the example');
}
var x = func(); //Means you execute the function and output its return value to x;
var x = func; //Means you attribute the function to the variable, so you can call it, using x.
Example
function f(){
return 4;
}
var x = f(); // x = 4
var x = f; // x = f()

How can I use html tag in this javascript? [duplicate]

This question already has answers here:
Changing the way a JavaScript Alert() or Prompt() looks
(4 answers)
Closed 8 years ago.
How can I use html tag in this javascript?
First of all, why <br> doesn't work in prompt. Secondly, why can't I use tags for this code (poundOne.pound) to make the font larger by using css or html code such as <h1>, <h2>, <h3>... or <div style="......">?
<html>
<head>
<script type="text/javascript">
function poundToKgConvertor( pound ){
this.pound = pound;
this.convertorDon = convertor;
}
function convertor(){
var convert = this.pound * 0.453592;
return convert;
}
var poundOne = new poundToKgConvertor(prompt ("Convert Pound to Kilogram!<br> Please insert your number of pound!"));
</script>
</head>
<body>
<script type="text/javascript">
document.write(poundOne.pound + " Pound = " + poundOne.convertorDon() + " <b>Kilogram</b>");
</script>
</body>
</html>
You can't use HTML in prompt/alert dialogs. However you can use new line characters:
prompt ("Convert Pound to Kilogram!\n Please insert your number of pound!");

why it is printing [object] as alert [duplicate]

This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 8 years ago.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
user name:
<input type="text" id="t1">
<br>
<button type="button" onClick="myFunction()">display</button>
<script type="text/javascript">
function myFunction() {
var str;
str = document.getElementById("t1");
alert(str);
}
</script>
</body>
</html>
In the above program it is displaying [object] inside the alert box,I don't know why,I want to display what ever user input in the text box.help me..........
You're only getting the html element which is represented as an object, not the actual contents of the <input>. You need to explicitly get that content using .value:
function myFunction() {
var str;
str = document.getElementById("t1").value;
alert(str);
}
Change:
str = document.getElementById("t1")
to:
str = document.getElementById("t1").value;
jsFiddle example
document.getElementById("t1") refers to the element so you need to specify the property of the element you want. In this case, the value.
Your str variable contains a reference to the object itself, not the text inside. What you want is:
str = document.getElementById('t1').value;
You should use t1.value in the alert. t1 is the whole input element but you are only interested at what has been entered i.e. its value.
rather than alert(str), use console.log(str), then check browsers console

Categories

Resources