How can I link a JavaScript variable to a HTML value?

I need to link an item in a table to a Javascript variable, but it won't link. I think there will be further problems changing the value.

I am running on Atom Editor, with the script package installed, although I could copy the script into Notepad++ or Brackets if needed.

</tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id = "Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

</tr>



<script>

var Abena_Natale = ""



</script>

I expected to get a variable that would change the value in the Abena_Natale element when the Javascript stated. Instead, it just stays the same.

asked Jan 2 at 20:59

Samuel

2118

3

We appreciate that you're a beginner, but you seem to have some considerable assumptions about functionality which doesn't exist without the use of complex frameworks. It's recommended that you start with some introductory tutorials on JavaScript, including how to write to the HTML elements (often called the DOM) or read values from HTML elements. Simply declaring a variable doesn't create a bi-directional binding, or any relationship whatsoever, with HTML elements.

– David
Jan 2 at 21:07

var Abena_Natale = "" by using var this code create a new variable.

– MrJ
Jan 2 at 21:08

Agree with @David, recommend doing so good tutorials on build the HTML, get that solid first. Will help you immensely as you move forward.

– Bibberty
Jan 2 at 21:14

add a comment |

I need to link an item in a table to a Javascript variable, but it won't link. I think there will be further problems changing the value.

I am running on Atom Editor, with the script package installed, although I could copy the script into Notepad++ or Brackets if needed.

</tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id = "Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

</tr>



<script>

var Abena_Natale = ""



</script>

I expected to get a variable that would change the value in the Abena_Natale element when the Javascript stated. Instead, it just stays the same.

asked Jan 2 at 20:59

Samuel

2118

3

We appreciate that you're a beginner, but you seem to have some considerable assumptions about functionality which doesn't exist without the use of complex frameworks. It's recommended that you start with some introductory tutorials on JavaScript, including how to write to the HTML elements (often called the DOM) or read values from HTML elements. Simply declaring a variable doesn't create a bi-directional binding, or any relationship whatsoever, with HTML elements.

– David
Jan 2 at 21:07

var Abena_Natale = "" by using var this code create a new variable.

– MrJ
Jan 2 at 21:08

Agree with @David, recommend doing so good tutorials on build the HTML, get that solid first. Will help you immensely as you move forward.

– Bibberty
Jan 2 at 21:14

add a comment |

I need to link an item in a table to a Javascript variable, but it won't link. I think there will be further problems changing the value.

I am running on Atom Editor, with the script package installed, although I could copy the script into Notepad++ or Brackets if needed.

</tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id = "Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

</tr>



<script>

var Abena_Natale = ""



</script>

I expected to get a variable that would change the value in the Abena_Natale element when the Javascript stated. Instead, it just stays the same.

asked Jan 2 at 20:59

Samuel

2118

I need to link an item in a table to a Javascript variable, but it won't link. I think there will be further problems changing the value.

I am running on Atom Editor, with the script package installed, although I could copy the script into Notepad++ or Brackets if needed.

</tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id = "Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

</tr>



<script>

var Abena_Natale = ""



</script>

I expected to get a variable that would change the value in the Abena_Natale element when the Javascript stated. Instead, it just stays the same.

javascript html variables

asked Jan 2 at 20:59

Samuel

2118

asked Jan 2 at 20:59

Samuel

2118

asked Jan 2 at 20:59

Samuel

2118

asked Jan 2 at 20:59

Samuel

2118

asked Jan 2 at 20:59

Samuel

2118

3

We appreciate that you're a beginner, but you seem to have some considerable assumptions about functionality which doesn't exist without the use of complex frameworks. It's recommended that you start with some introductory tutorials on JavaScript, including how to write to the HTML elements (often called the DOM) or read values from HTML elements. Simply declaring a variable doesn't create a bi-directional binding, or any relationship whatsoever, with HTML elements.

– David
Jan 2 at 21:07

var Abena_Natale = "" by using var this code create a new variable.

– MrJ
Jan 2 at 21:08

Agree with @David, recommend doing so good tutorials on build the HTML, get that solid first. Will help you immensely as you move forward.

– Bibberty
Jan 2 at 21:14

add a comment |

3

We appreciate that you're a beginner, but you seem to have some considerable assumptions about functionality which doesn't exist without the use of complex frameworks. It's recommended that you start with some introductory tutorials on JavaScript, including how to write to the HTML elements (often called the DOM) or read values from HTML elements. Simply declaring a variable doesn't create a bi-directional binding, or any relationship whatsoever, with HTML elements.

– David
Jan 2 at 21:07

var Abena_Natale = "" by using var this code create a new variable.

– MrJ
Jan 2 at 21:08

Agree with @David, recommend doing so good tutorials on build the HTML, get that solid first. Will help you immensely as you move forward.

– Bibberty
Jan 2 at 21:14

We appreciate that you're a beginner, but you seem to have some considerable assumptions about functionality which doesn't exist without the use of complex frameworks. It's recommended that you start with some introductory tutorials on JavaScript, including how to write to the HTML elements (often called the DOM) or read values from HTML elements. Simply declaring a variable doesn't create a bi-directional binding, or any relationship whatsoever, with HTML elements.

– David
Jan 2 at 21:07

var Abena_Natale = "" by using var this code create a new variable.

– MrJ
Jan 2 at 21:08

Agree with @David, recommend doing so good tutorials on build the HTML, get that solid first. Will help you immensely as you move forward.

– Bibberty
Jan 2 at 21:14

add a comment |

2 Answers
2

active

oldest

votes

There was an error in your HTML.
From there we need to write the selector to get the element.
And then grab the content inside the node.

Update to support editing.

var Abena_Natale = "";

var abenaElement;



document.addEventListener('DOMContentLoaded', function() {

  abenaElement = document.querySelector('#Abena_Natale');

  Abena_Natale = abenaElement.innerHTML;



  console.log(Abena_Natale);

  

  // Update the value

  abenaElement.innerHTML = "Testing";

  

});

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:10

Bibberty

2,2091317

add a comment |

That's not how you access the Document Object Model (DOM) with JS. You need to grab the element using one from a number of methods, and then amend the data.

1) Make sure your table row elements are opened and closed correctly.

2) Use either document.getElementById('Abena_Natale'), or document.querySelector('#Abena_Natale') to grab the element.

3) Set the textContent of the element. value is generally used for input elements.

const aN = document.getElementById('Abena_Natale');

aN.textContent = 'This has been changed';

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:13

Andy

30.3k73564

add a comment |

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013101%2fhow-can-i-link-a-javascript-variable-to-a-html-value%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

There was an error in your HTML.
From there we need to write the selector to get the element.
And then grab the content inside the node.

Update to support editing.

var Abena_Natale = "";

var abenaElement;



document.addEventListener('DOMContentLoaded', function() {

  abenaElement = document.querySelector('#Abena_Natale');

  Abena_Natale = abenaElement.innerHTML;



  console.log(Abena_Natale);

  

  // Update the value

  abenaElement.innerHTML = "Testing";

  

});

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:10

Bibberty

2,2091317

add a comment |

There was an error in your HTML.
From there we need to write the selector to get the element.
And then grab the content inside the node.

Update to support editing.

var Abena_Natale = "";

var abenaElement;



document.addEventListener('DOMContentLoaded', function() {

  abenaElement = document.querySelector('#Abena_Natale');

  Abena_Natale = abenaElement.innerHTML;



  console.log(Abena_Natale);

  

  // Update the value

  abenaElement.innerHTML = "Testing";

  

});

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:10

Bibberty

2,2091317

add a comment |

There was an error in your HTML.
From there we need to write the selector to get the element.
And then grab the content inside the node.

Update to support editing.

var Abena_Natale = "";

var abenaElement;



document.addEventListener('DOMContentLoaded', function() {

  abenaElement = document.querySelector('#Abena_Natale');

  Abena_Natale = abenaElement.innerHTML;



  console.log(Abena_Natale);

  

  // Update the value

  abenaElement.innerHTML = "Testing";

  

});

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:10

Bibberty

2,2091317

There was an error in your HTML.
From there we need to write the selector to get the element.
And then grab the content inside the node.

Update to support editing.

var Abena_Natale = "";

var abenaElement;



document.addEventListener('DOMContentLoaded', function() {

  abenaElement = document.querySelector('#Abena_Natale');

  Abena_Natale = abenaElement.innerHTML;



  console.log(Abena_Natale);

  

  // Update the value

  abenaElement.innerHTML = "Testing";

  

});

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

var Abena_Natale = "";

var abenaElement;



document.addEventListener('DOMContentLoaded', function() {

  abenaElement = document.querySelector('#Abena_Natale');

  Abena_Natale = abenaElement.innerHTML;



  console.log(Abena_Natale);

  

  // Update the value

  abenaElement.innerHTML = "Testing";

  

});

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

var Abena_Natale = "";

var abenaElement;



document.addEventListener('DOMContentLoaded', function() {

  abenaElement = document.querySelector('#Abena_Natale');

  Abena_Natale = abenaElement.innerHTML;



  console.log(Abena_Natale);

  

  // Update the value

  abenaElement.innerHTML = "Testing";

  

});

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:10

Bibberty

2,2091317

answered Jan 2 at 21:10

Bibberty

2,2091317

answered Jan 2 at 21:10

Bibberty

2,2091317

answered Jan 2 at 21:10

Bibberty

2,2091317

add a comment |

That's not how you access the Document Object Model (DOM) with JS. You need to grab the element using one from a number of methods, and then amend the data.

1) Make sure your table row elements are opened and closed correctly.

2) Use either document.getElementById('Abena_Natale'), or document.querySelector('#Abena_Natale') to grab the element.

3) Set the textContent of the element. value is generally used for input elements.

const aN = document.getElementById('Abena_Natale');

aN.textContent = 'This has been changed';

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:13

Andy

30.3k73564

add a comment |

That's not how you access the Document Object Model (DOM) with JS. You need to grab the element using one from a number of methods, and then amend the data.

1) Make sure your table row elements are opened and closed correctly.

2) Use either document.getElementById('Abena_Natale'), or document.querySelector('#Abena_Natale') to grab the element.

3) Set the textContent of the element. value is generally used for input elements.

const aN = document.getElementById('Abena_Natale');

aN.textContent = 'This has been changed';

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:13

Andy

30.3k73564

add a comment |

That's not how you access the Document Object Model (DOM) with JS. You need to grab the element using one from a number of methods, and then amend the data.

1) Make sure your table row elements are opened and closed correctly.

2) Use either document.getElementById('Abena_Natale'), or document.querySelector('#Abena_Natale') to grab the element.

3) Set the textContent of the element. value is generally used for input elements.

const aN = document.getElementById('Abena_Natale');

aN.textContent = 'This has been changed';

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:13

Andy

30.3k73564

That's not how you access the Document Object Model (DOM) with JS. You need to grab the element using one from a number of methods, and then amend the data.

1) Make sure your table row elements are opened and closed correctly.

2) Use either document.getElementById('Abena_Natale'), or document.querySelector('#Abena_Natale') to grab the element.

3) Set the textContent of the element. value is generally used for input elements.

const aN = document.getElementById('Abena_Natale');

aN.textContent = 'This has been changed';

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

const aN = document.getElementById('Abena_Natale');

aN.textContent = 'This has been changed';

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

const aN = document.getElementById('Abena_Natale');

aN.textContent = 'This has been changed';

<table>

  <tr>

    <td>Abena</td>

    <td>Natale</td>

    <td id="Abena_Natale">11782</td>

    <td>No.1</td>

    <td>Monarch of Boars</td>

  </tr>

</table>

answered Jan 2 at 21:13

Andy

30.3k73564

answered Jan 2 at 21:13

Andy

30.3k73564

answered Jan 2 at 21:13

Andy

30.3k73564

answered Jan 2 at 21:13

Andy

30.3k73564

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu