我一直在尝试使用 Javascript 练习一些练习。以下是我一直面临的一些挑战。如果有错误或我遗漏的东西，请提出建议。
注意：我不想在这个阶段使用 Jquery。
锻炼：
要求用户输入一些文本。单击按钮时，输入的文本需要显示为旋转。
- 我采取的第一种方法第一次得到了结果。但是，如果我输入一个新文本，然后单击按钮，则旋转会在旧文本和新文本之间波动。我不确定我的解释是否正确。这是第一次尝试：
测试结果： http: //learningharvest.co.in/
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Enter the text to be reversed</p>
<div id="texttoberotated">
<input type="text" id="texttobeRot"></p>
</div>
<div>
<button id="rotateText">Rotate Text</button>
<p id="rotatedText"></p>
</div>
<script>
document.getElementById("rotateText").onclick=function (){
var text=null;
text= document.getElementById("texttobeRot").value;
var finaltext=text;
document.getElementById("rotatedText").innerHTML=finaltext;
setInterval(rotatetext, 500);
var numberofRotations=0;
var length=0;
length=text.length;
var i=0;
function rotatetext(){
i=length;
if(numberofRotations<=text.length){
getText();
}else{
numberofRotations=0;
length=text.length;
i=length;
preText=null;
postText=null;
finaltext=null;
getText();
}
}
function getText(){
preText=text.slice(length);
postText=text.slice(0,i);
i--;
finaltext=preText+" "+postText;
numberofRotations++;
length--;
document.getElementById("rotatedText").innerHTML=finaltext;
}
}
</script>
</body>
2. 我做的第二次尝试是使用 childNodes 方法。但是，我无法获取输入标签的 nodeValue。如果我尝试使用任何其他元素，而不是输入元素，nodeValue 就可以工作。
此外，函数 rotatetext 在页面加载时执行，而不是在单击按钮时执行。如果我在按钮标签本身中内联添加 onclick 事件，效果很好。
这是我在控制台中遇到的错误：
旋转文本父子方法.html：27 未捕获的类型错误：无法在旋转文本父子方法中读取未定义的属性“nodeValue”（旋转文本父子方法。html：27）旋转文本父子方法。html：23
这是我到目前为止起草的正文内容。在这个阶段，我只是想用用户输入的文本替换文本“在此处显示旋转文本”。
<body>
<p>Enter the text to be reversed</p>
<input type="text" id="texttobeRot">
<button id="rotateText">Rotate Text</button>
<p id="rotatedText">Show Rotated Text here</p>
<script>
document.getElementById("rotateText").onclick= rotatetext();
function rotatetext(){
var element=document.getElementById("texttobeRot");
var textNode=element.childNodes[0];
var text=textNode.nodeValue;
var texttobeRotated;
texttobeRotated= text;
document.getElementById("rotatedText").innerHTML=texttobeRotated;
};
期待您的所有意见。