我有一个progra，它检索数据，然后显示一系列要解决的问题。只有当我将页面设置为Inspect模式时，问题流的按钮才会显示。Edge和Chrome上都会出现这种情况。为什么会出现这种情况，如何让它正常显示？
下面是html：
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<style>
html, body {
margin: 0;
height: 100%;
}
</style>
<head>
<meta charset="utf-8" />
<title>Maxwell Cognitive Problem Launcher</title>
</head>
<body>
<h1 ID:prob_identifier>ID: 96543210</h1>
<h2 ID:student_id>1</h2>
</body>
<div id="maxwell_container"></div>
<div id="app"></div>
<div id="feedback"></div>
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Load our React component. -->
<script type="text/babel" src="./maxwell/app/components/MaxwellCore.jsx" crossorigin ></script>
</html>下面是介绍部分：
let props = '';
let html_tag = '#maxwell_container';
let student_id = document.getElementById("student_id");
console.log(student_id);
let pg = SVG().addTo(html_tag).viewbox(0,0,10000,5000).size(`100%`, `100%`);
pg.data({'finalAnswer':0});
let stuffout = new ProbProfile(props, pg);
stuffout.getData(pg);下面是数据获取部分：
class ProbProfile extends React.Component {
constructor(props, pg) {
super(props);
this.state = {ProbID:'', ProbDesc:'', userID:''};
}
getData(pg) {
let request = new XMLHttpRequest();
console.log("Inside getData method");
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// console.log(this.responseText);
if (this.responseText != '') {
let stuff = new Stuff(pg, this.responseText);
problem_page(stuff);
}
}
};
request.open('GET', 'http://localhost:8081/maxwellData', true);
request.send();
request.onload;
//console.log(request.responseText);
}
render() {
return(
'<div>'+
'<h2>Getting data</h2>'
+'{this.getData()}'
+'</div>'
);
}
}这里是按钮的用武之地：
function problem_page(stuff) {
const sleep = ms => new Promise(r => setTimeout(r, ms));
console.log("Started problem_runner")
let dbg = 0;
let inpd = JSON.parse(stuff.stuffout);
let inpdd = inpd.data;
const RepeaterWithContinue = () => {
console.log("Repeater with Continue");
const evaluateRef = React.useRef(false);
const continueRef = React.useRef(false);
const started = React.useRef(false);
const DIMS = new Layout(104, 141, 21, 6 );
let i = 0;
const start = async () => {
if (started.current) {return;};
let done = 0;
for (const element of inpdd) {
console.log("Problem set "+element.problem_id);
let inpda = new Array(element.algorithm);
for (let j = 0; j < inpda.length; j++) {
console.log("Problem number "+j);
let probs = inpda[j].Problems;
for (const element of probs){
done = 0;
let pp = stuff.pg;
let PS_in = element.spec;
let PS = new ProbSpec(PS_in.free, PS_in.color, PS_in.shape, PS_in.size, PS_in.rotation);
// (algorithm, levels, depth, shapelimit, spec)
let PD = new ProbDef(element.algorithm, element.levels, element.depth, probs[j].shapelimit, PS);
console.log('PD is: ',PD);
let soln = problem(PD, pp, DIMS);
let problemRef = i+'_'+j;
while (done == 0) {
if (evaluateRef.current) {
evaluate(soln, pp, problemRef, DIMS);
while (!(continueRef.current)) {
await sleep(10000);
}
done = 1;
pp.clear();
evaluateRef.current = false;
pp.data({'finalAnswer':-1});
break;
}
i++;
// console.log("time = "+i)
await sleep(1000);
}
}
}
}
};
return (
<div style={{ display: "block"}}>
<button type="button" onClick={() => {start();started.current = true; }}>Start</button>
<button type="button" onClick={() => evaluateRef.current = true}>
Evaluate
</button>
<button type="button" onClick={() => continueRef.current = true}>
Continue
</button>
</div>
);
};
ReactDOM.createRoot(document.querySelector("#app"))
.render(<RepeaterWithContinue />)
}我试着用css样式来让它显式的显示在div容器中，没有成功。我没有离线的css，不确定这是否是解决方案。
1条答案
按热度按时间5jvtdoz21#
想通了...按钮出现在页面底部，向下滚动就会显示出来。这显然是一个初始格式问题。