I am doing an inventory table with html and I am attempting to overwrite a paragraph. I saw that it was possible to do
document.getElementById(“Myid”).innerHTML= variable;
And this worked on the online coding environment they demonstrated it on.
However. I’m attempting to do this for a website.
In a table that looks like
function myfunction(){
console.log(“howdy”);
const form =document.getElementById(“form1”);
const formN = form.elements[0];
let formNval = Number(formN.value);
document.getElementById(“Myid”).innerHTML= formNval;
}
<table>
<tr>
<td>
<p id=“Myid”>69</p>
</td>
<td>
<form id=“form1” onsubmit=“myfunction()” method=“post” action=“#”>
<input type=“number” min=“1”>
<button type=“submit” value=“Submit”>
</form >
</td>
</tr>
</table>
I previously tried to give my table data element an ID in order to do this but I switched it to adding a p element inside the table data element because that’s what the example showed. I run this on VSCode debugger and a go live extension but it only appears for a second then goes back to the original content. How can I make the change stay? Is there a way to place a variable inside the p element specifically made to save changes while running on a server?
My full JavaScript is just a test function that contains a console log for testing and the document. GetElementById line.
Related
Its as simple as it gets, i want to change the text within <td> to be whatever the user enters in the prompt, i have tried many solutions. Such as putting the script element below body. Here is the java script code however it doesnt work although i assume everything is as it should.
var yourname = prompt("Enter your name");
document.getElementById("name").innerHTML = yourname;
Here is the HTML
<html><head>Cant figure this out</head>
<body>
<table>
<tr>
<td>Name</td>
</tr>
<tr>
<td id = "Name"></td>
</tr>
</table>
</body>
</html>```
I see a couple of problems with the code:
The html doesn't have a script-tag to use the javascript. Without that it won't load. To avoid these kind of problems please make the smallest code that have the problem and use copy-paste to get the exact code in questions.
Name != name. The case of the id differs between the html and the javascript.
You have additional characters last in the html: ```
I'm not a frontend developer and don't know if this will solve your current problem. But those issues should be handled either way.
in your HTML you gave the an id of "Name", yet in the javascript script you are searching for an element with id "name". The id is case sensitive, so you would have to search for "Name", not "name".
The following code generates a website which gives the user the opportunity to input a ingredient with corresponding amount (the input fields).
After the user pressed the add button the inputs of ingredient and amount are displayed in a table. Furthermore the third cell of the added row should be a remove button.
The only part of the provided code which is not working at the moment is the creation of the remove button. I am super new to web development and also to the handlebar library.
My question is how I can correctly display the button while using the handlebar library? Currently, instead of the actual button [object HTMLButtonElement] gets displayed. I am sure this is possible but I couldn't find the right way.
Code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script id="result" type="text/template">
<tr>
<td> {{ ingredient }} </td>
<td> {{ amount }} </td>
<td> {{ change }} </td>
</tr>
</script>
<script>
const template = Handlebars.compile(document.querySelector('#result').innerHTML);
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#add').onclick = () => {
// create the remove button (HERE IT GOES WRONG)
const btn = document.createElement("BUTTON");
btn.innerHTML = "remove element";
btn.className = "remove";
// get the inputs
const ingredient = document.querySelector('#ingredient').value;
const amount = document.querySelector('#amount').value;
const content = template({'ingredient': ingredient, 'amount': amount, 'change': btn});
document.querySelector('#tab').innerHTML += content;
};
});
</script>
</head>
<body>
<input type="text" id="ingredient">
<input type="text" id="amount">
<button id="add">Add</button>
<table id="tab">
<tr>
<th>Ingredient:</th>
<th>Amount:</th>
<th>Change:</th>
</tr>
</table>
</body>
</html>
I am grateful for any help.
You are mixing two different ways of adding content to the DOM. The first is using Handlebars to compile a HTML template String into a function that will return an interpolated HTML string when passed a data context Object. The second is using document.createElement to create DOM nodes that will be directly inserted into the DOM with DOM methods like .appendChild().
The btn variable you are creating is getting assigned to it the result of document.createElement("BUTTON"), which is an HTML Button Element Object. When you pass this to your compiled template function, Handlebars only knows to try to stringify it in order to make it a part of the rendered output. When this Object is stringified, it produces "[object HTMLButtonElement]".
You could do some unpleasant work to get the rendered HTML string of your button element and pass that to your template function, but the better thing to do would be to leave the HTMLing to the template.
This would mean removing all of your const btn code and replacing that variable in your template with the desired HTML.
Therefore:
<td> {{ change }} </td>
Becomes:
<td><button class="remove">remove element</button></td>
Of course the next tricky part becomes how to bind a click handler to these dynamically added buttons; but this is outside the scope of this question.
I'm trying to access links to attachments for a web automation project. The problem is that when I load the web-page via Chrome and inspect element, I can see HTML Code (divs and tables) but when I use the view source option, all I see is JavaScript functions.
Now when I try to access an element via selenium(which has access to source, the JavaScript Code) I can't find any element there. I cannot explicitly find the mention of iFrames, but I think the iFrames that contain this information are being loaded by the JavaScript Code. Is there a way to get access to the underlying HTML to find the elements and get access to the links?
NOTE : When I try to view the page source which is a collection of JavaScript functions, there are no links to a frame which can be followed to get the required HTML.
For context :
The inspect element looks like :
<div id="SectionAttachments">
<table summary="" border="0" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td></td>
<td><img class="attachmentsIcon" src="images/modern_graphite/attachment_url.png" alt="Linked Resource" title="Linked Resource"></td>
<td class="attachmentTitle">
Customer View
</td>
<td>by</td>
<td class="attachmentAuthor contact_popover" ivalue="99832"></td>
<td class="attachmentDate"><span class="dateSpacer">-</span>10/25/2016 04:21:13 AM</td>
<td width="16">
<img align="middle" src="images/modern_graphite/edit.gif" alt="Edit this Attachment" title="Edit this Attachment" border="0">
</td>
<td width="16">
<script type="text/javascript">
if(this.eMail)
{
document.write( "<a href=javascript:eMail('85',99832,document.forms[0].F99832,7705574) style={13}><img src='images/modern_graphite/email.gif' border='0' align='top' alt='Send E-mail' title='Send E-mail'></a>");
}
else if(parent&&parent.eMail)
{
document.write( "<a href=javascript:parent.eMail('85',99832,document.forms[0].F99832,7705574) style={13}><img src='images/modern_graphite/email.gif' border='0' valign='bottom' alt='Send E-mail' title='Send E-mail'></a>");
}
</script><img src="images/modern_graphite/email.gif" border="0" align="top" alt="Send E-mail" title="Send E-mail">
</td>
</tr>
</tbody>
</table>
</div>
I want to extract the link at "LINK GOES HERE"
The Page source has no div with ID = "section attachments" or any other elements inside the div. (I searched with corresponding IDs, class names etc, no success)
What I have tried :
I tried to search the page source from the browser, no results.
My selenium code tries to search for these elements using XPath, it
returns no element found.
XPath expression :
driver.get_element_by_xpath("//td[#class = 'attachmentTitle']/a/#href")
I have tried putting my script to sleep in case the page isn't fully loaded, no effect.
Is there a way to get these links via selenium? Any help will be highly appreciated.
EDIT :
The problem was resolved by modifying the URL a bit to load a page that renders similarly but has iFrame tags that I can switch to and then find the elements using the same Xpath and get the links.
This page was being loaded after a few redirects from another page. A slight string modification of the URL (using replace in Python) solved the problem. Thanks to all who tried to help.
get element by -
ele = driver.get_element_by_xpath("//td[#class = 'attachmentTitle']/a")
then retrieve element attribute using -
ele.get_attribute('href')
Looks like there are few things that you may be mixing together:
When you view the page source in the browser, you're shown the html as it was sent from the server. This html can contain JavaScript that creates elements dynamically, but in the html itself you'd see only the JavaScript code that creates them.
The DOM which is what you see when you inspect element, is the current structure of the page. Initially it's pretty much the same as the html, but may include elements that were created or changed dynamically using JavaScript after the page was loaded from the server. This is also what Selenium interacts with.
(Not sure if you mentioned it, but for the sake of completeness) driver.page_source returns a string which represents that DOM (current state), but as a valid html format.
An html page can contain nested pages using the iframe tag. Each (parent or nested) page had its own html source and its own DOM. In Selenium you have to explicitly switch between them using the driver.switch_to method. Note that on the browser's dev tools though (ie, inspect element), the DOMs of all pages appear combined as one.
I am trying to display a page's ID within itself i.e. within the content of the page the page ID is displayed.
Q/A within the community recommend using **$content.getIdAsString()** but that has not worked. I've tried to input this within an HTML macro and without one as well but to no avail.
I'm trying to get the ID of the page so that an HTML code block could reference the page it is included on instead of inputting the page ID by hand every single time.
Here is the code that I am currently using:
<input type="image" src="/download/attachments/171705685/BackPurple.jpg"
onclick="location.href=document.referrer; return false;">
<input type="image" src="/download/attachments/171705685/DownloadPurple.jpg"
onclick="location.href='/spaces/flyingpdf/pdfpageexport.action?pageId=171706153';"> <-- This pageID
I want this highlighted pageID is what I am hoping can be pulled in automatically
Looking forward to your responses.
I use this to get the Page ID of a page do my users to have to go looking for it.
<tr>
<td>UNDERLYING PAGE ID:</td>
<td> $content.getId() </td>
</tr>
I have a table where one of the columns is a Bootstrap Switch element which will be later used to turn on or off the corresponding element of that row.
<tbody>
{{#each sensorslist}}
<tr>
<td>{{name}}</td>
<td>{{mac}}</td>
<td>
<input type="checkbox" class="on-off-checkbox" checked={{state}} />
</td>
</tr>
{{/each}}
</tbody>
However, if I hard code one row, it all works great and the switch always appears. However, when I load from the sensors list in my database as shown, it only shows when I go to that page by a link (I am using Iron Router). If I press F5, it not shows the Bootstrap Switch.
I am not using autopublish. I am subscribing to the sensors collection in the client:
Sensors = new Mongo.Collection("sensors");
Meteor.subscribe('sensors');
And to load the data I use this helper:
Template.sensores.helpers({
'sensorslist': function(){
return Sensors.find();
}
});
And also to render the elements I have this as the rendered function:
Template.sensores.rendered = function (){
$('.on-off-checkbox').bootstrapSwitch({
'offColor': 'danger'
});
};
As I said, if I move around the webapp using only the menu, it works fine, if I refresh the page with F5 or simple go to that page using a direct link it will not work.
I noticed that if I use a setTimeout to execute that code inside the rendered, and add a sufficient amount of time, it will always work, so I guess I am missing something...
Thank you very much in advance!
I had encountered the same issue as yours ever before.
As I know, when Template.sensores is rendered, the data context sensorslist is not loaded completely so we can't query the DOM under sensorslist block.
But when you use setTimeout for a sufficient amount of time, it works as the DOM under sensorslist is rendered completely.
My solution for this is using another template additonally:
template(name='sensores')
...
<tbody>
{{#each sensorslist}}
{{> sensorsList}}
{{/each}}
</tbody>
...
template(name='sensorsList')
<tr>
<td>{{name}}</td>
<td>{{mac}}</td>
<td>
<input type="checkbox" class="on-off-checkbox" checked={{state}} />
</td>
</tr>
The Bootstrap Switch is placed in the rendered function of sensorsList template.
Since this template will be rendered as many times as the data context sensorslist's length, each DOM we want to manipulate should be scoped within its own template instance.
Template.sensorsList.rendered = function () {
this.$('.on-off-checkbox').bootstrapSwitch({
'offColor': 'danger'
});
};